Question

我正在制作我的第一款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的新手。

Answer 1

延伸评论：

“为什么”：

因为背景图片是在onload事件中绘制的，这将在“稍后”发生，而文字会立即绘制。
因此，首先绘制文本，然后有时稍后绘制图像，从而导致文本被覆盖。

“如何”：

根据背景图像的“动态”程度，您可以考虑：

在background-image / cancas容器上使用CSS canvas，并使用className / classList在不同背景之间切换;

在<img>下方添加canvas标记，并更改其src属性;

在当前版本下方使用额外的“背景”canvas，这样您就可以在当前版本中绘制游戏内容，并在新版本中绘制（可能不经常更新）背景。

创意1和2的归功于@markE：）

Answer 2

第一件事：

检查图像的尺寸。它应该等于画布的大小。
context.drawImage也可以获取图像的width和height参数。

语法：context.drawImage(img, x, y, width, height);

编辑后，看起来应该像这样

let game_canvas = document.getElementById("game");
let game_context = game_canvas.getContext("2d");
let swedishflagbg = new Image();
swedishflagbg.src = "resources/images/swedishflagbg.png";
swedishflagbg.onload = function() {
    game_context.drawImage(swedishflagbg, 0, 0, game_canvas.width, game_canvas.height);
}
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);

Answer 3

对于仍然面临背景图像覆盖文本（文本上方的图像）问题的任何人，我都想“为什么加载bg图像后不在onload函数中绘制文本！？”

它奏效了！！浏览器（或其他）首先加载图像，然后在图像上方加载我的文本。

<canvas width="534" height="104" 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>
    let game_canvas = document.getElementById("game");
    let game_context = game_canvas.getContext("2d");
    let swedishflagbg = new Image();
    swedishflagbg.src = "./img/logo1.png";
    swedishflagbg.onload = function() {     
    game_context.drawImage(swedishflagbg, 0, 0, game_canvas.width, game_canvas.height);
    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>

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

3 个答案:

“为什么”：

“如何”：