javascript 如何在 HTML5 画布上绘制背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27210276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw a background image on an HTML5 canvas
提问by Republican31
I'm working on my first HTML5 Canvas game. I am trying to put in a background image, and I don't know how to do it. The game will change backgrounds throughout levels, but I think I understand how to make that happen. However, if I just try to draw an image, then it appears above my title text. Any ideas how to fix this? I don't think the CSS method will work, because the background will change. Here is my code:
我正在开发我的第一个 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>
I am new to JavaScript, and even newer to the HTML5 Canvas.
我是 JavaScript 的新手，甚至对 HTML5 Canvas 也是新手。
回答by Passerby
Extending from comment:
从评论扩展：
The "why":
“为什么”：
Because the background image is drawn in an onloadevent, which will happen "later", while text is drawn immediately.
So the text is drawn first, and then sometimes later the image is drawn, thus causing the text to be covered.
因为背景图像是在一个onload事件中绘制的，这将在“稍后”发生，而文本是立即绘制的。
所以先绘制文本，有时再绘制图像，从而导致文本被覆盖。
The "how":
“如何”：
Depending on how "dynamic" the background image is, you can consider:
根据背景图像的“动态”程度，您可以考虑：
- use CSS
background-imageoncancas/canvascontainer, and useclassName/classListto switch between different backgrounds; - put an
<img>tag underneath thecanvas, and change itssrcproperty; - use an additional "background"
canvasunderneath the current one, so you can draw the game content in current one, and draw the (probably not frequently-updated) background in the new one.
background-image在cancas/canvas容器上使用CSS ，并使用className/classList在不同背景之间切换；<img>在 下方放置一个标签canvas，并更改其src属性；canvas在当前背景下使用额外的“背景” ，这样您就可以在当前背景中绘制游戏内容，并在新背景中绘制（可能不经常更新的）背景。
Credit of idea 1 and 2 goes to @markE :)
想法 1 和 2 归功于@markE :)
回答by Alvin Ogwu
First things:
第一件事：
- Check the size of your image. It should be equivalent to the size of the canvas.
context.drawImagecan also take width and height parameter for the image.
- 检查图像的大小。它应该等于画布的大小。
context.drawImage还可以为图像获取宽度和高度参数。
Syntax: context.drawImage(img, x, y, width, height);
句法： context.drawImage(img, x, y, width, height);
After editing, it should look like this
编辑后应该是这个样子
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);
