如何在HTML5画布上绘制背景图像

共和党人31

我正在开发我的第一个HTML5 Canvas游戏。我正在尝试放入背景图片,但我不知道该怎么做。游戏将在整个关卡中改变背景,但我想我知道如何做到这一点。但是,如果我只是尝试绘制图像,则该图像会出现在标题文本上方。任何想法如何解决这一问题?我认为CSS方法不会起作用,因为背景会改变。这是我的代码:

<!DOCTYPE html>
<html>
<head>
  <title>How Well Do You Know Your Swedish?</title>
</head>
<body>
  <canvas width="640" height="480" id="game" style="display: block; margin-left: auto;         margin-right: auto; border: 1px solid black;" Your Browser is not compatible with this game. We recommend Google Chrome, Mozilla Firefox, or Opera.></canvas>
  <script>
    var game_canvas = document.getElementById("game");
    var game_context = game_canvas.getContext("2d");
    var swedishflagbg = new Image();
    swedishflagbg.src = "resources/images/swedishflagbg.png";
    swedishflagbg.onload = function() {
      game_context.drawImage(swedishflagbg, 0, 0);
    }
    game_context.fillStyle = "#000000";
    game_context.font = "35px Ubuntu";
    game_context.textAlign = "center";
    game_context.textBaseline = "top";
    game_context.fillText("How Well Do You Know Your Swedish?", 320, 0);
  </script>
</body>
</html>

我是JavaScript的新手,甚至还不是HTML5 Canvas的新手。

过路人

从评论扩展:

“为什么”:

因为背景图像是在onload事件中绘制的,所以事件将“稍后”发生,而文本则是立即绘制的
因此,首先绘制文本,然后有时再绘制图像,从而使文本被覆盖。

“如何”:

根据背景图像的“动态”程度,可以考虑:

  1. background-imagecancas/canvas容器使用CSS ,并使用className/classList在不同背景之间切换;
  2. <img>在下方放置一个标签canvas,并更改其src属性;
  3. canvas在当前背景使用一个额外的“背景” ,因此您可以在当前背景下绘制游戏内容,并在新背景下绘制(可能不是经常更新的)背景。

想法1和2的功劳归@markE :)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章