我正在开发我的第一个 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 中绘制的事件，该事件将在“稍后”发生，同时立即绘制文本。
所以先绘制文字，有时再绘制图像，从而导致文字被覆盖。
“如何”:
根据背景图像的“动态”程度，您可以考虑:
- 使用 CSS
background-image上cancas/canvas容器，并使用className/classList在不同背景之间切换； - 输入
<img>canvas下方的标签，并更改其src属性(property)； - 使用额外的“背景”
canvas在当前游戏的下方，这样您就可以在当前游戏中绘制游戏内容，并在新游戏中绘制(可能不经常更新的)背景。
想法 1 和 2 归功于 @markE :)
关于javascript - 如何在 HTML5 Canvas 上绘制背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27210276/