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

【问题标题】：How to draw a background image on an HTML5 canvas如何在 HTML5 画布上绘制背景图像
【发布时间】：2020-08-23 15:44:20
【问题描述】：

我正在开发我的第一个 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 事件中绘制的，而您的文本是立即绘制的。您也可以将文本绘图放在onload 事件中，但 IMO 更好的解决方案是使用两个画布，一个用于背景，一个用于前景，并使用 CSS 相应地放置它们。
@Passerby：也许扩展您的评论并将其作为答案发布，因为您已经回答了问题 (+1)。由于背景非常静态，您可能会使用图像而不是背景画布（移动设备处理画布元素的速度较慢，因此使用 1 张图像 + 1 张画布可能会更好）。

标签： javascript html canvas html5-canvas background-image

【解决方案1】：

从评论扩展：

“为什么”：

因为背景图片是在onload 事件中绘制的，该事件将在“稍后”发生，而文本立即绘制。
所以先绘制文本，有时再绘制图像，从而导致文本被覆盖。

“如何”：

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

在cancas/canvas容器上使用CSS background-image，并使用className/classList在不同背景之间切换；
在canvas下方添加<img>标签，并更改其src属性；
在当前背景下使用额外的“背景”canvas，这样您就可以在当前背景中绘制游戏内容，并在新背景中绘制（可能不经常更新的）背景。

想法 1 和 2 归功于 @markE :)

【讨论】：

谢谢你，很抱歉直到现在才回复这个问题，但我最终使用document.getElementById("canvas").style.background = "url('images/splashscreen.png')"; 更改了画布的背景。
@Republican31 你的方法也不行，图片又在文字前面了！！

【解决方案2】：

第一件事：

检查图像的大小。它应该等于画布的大小。
context.drawImage 也可以为图片取宽高参数。

语法：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);

【讨论】：

用这种方法静止图像在文本上方！！

【解决方案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>

【讨论】：