Html 如何在html中的图像顶部设置画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15639726/
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 set canvas on top of image in html
提问by supersuraccoon
Say I have a index.html with a canvas in it:
假设我有一个带有画布的 index.html：
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
and the canvas is showing ok this way ~~~
这样画布就可以正常显示了~~~
Now I want to put a image as background behind the canvas and I tried to add a img tag in the body:
现在我想把一张图片作为背景放在画布后面，我试图在正文中添加一个 img 标签：
<html>
<head>
</head>
<body style="text-align: center;background: #f2f6f8;">
<img src="xxx.png" alt="" />
<div style="display:inline-block;width:auto; margin: 0 auto; background: black; position:relative; border:5px solid black; border-radius: 10px; box-shadow: 0 5px 50px #333">
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
</body>
</html>
but then the canvas appeared to show after the image not on top of it ...
但是随后画布似乎显示在图像不在其顶部之后......
I really know nothing about html I think it should not be that hard to get this done, hope someone can give a hand here, thanks :)
我真的对 html 一无所知，我认为完成这项工作应该不难，希望有人能在这里伸出援手，谢谢:)
回答by Loktar
You just need to use z-index. I put the image and the canvas element in a container, and position them so the canvas will always be over the image.
您只需要使用z-index. 我将图像和画布元素放在一个容器中，并将它们定位，以便画布始终位于图像上方。
Also another note, you shouldn't size your canvas using CSS, you should always do it via the properties directly. In my fiddle I did it via JS.
还要注意的是，您不应该使用 CSS 来调整画布的大小，而应该始终直接通过属性进行调整。在我的小提琴中，我是通过 JS 完成的。
Markup
标记
<div id="container">
<img class='img' src="http://lorempixel.com/320/480/" alt="" />
<canvas id="gameCanvas" width="320" height="480"></canvas>
</div>
CSS
CSS
body{text-align: center;background: #f2f6f8;}
.img{position:absolute;z-index:1;}
#container{
display:inline-block;
width:320px;
height:480px;
margin: 0 auto;
background: black;
position:relative;
border:5px solid black;
border-radius: 10px;
box-shadow: 0 5px 50px #333}
#gameCanvas{
position:relative;
z-index:20;
}
回答by Pranay Rana
you can draw image in canvas like this , rather than putting canvason image
你可以像这样在画布上绘制图像，而不是放在canvas图像上
var topMap = new Image();
topMap.src = "myiamge.jpeg";
function drawMap() {
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(topMap, 0, 0);
}
function init() {
drawMap();
}
topMap.onload = function() {
init();
}
回答by metalwings
You can set a background image for the canvas with background-image: url('xxx.png');but the background won't be displayed if the user presses View imagein the browser.
您可以为画布设置背景图像，background-image: url('xxx.png');但如果用户View image在浏览器中按下，则不会显示背景。
<canvas style="background-image: url('xxx.png');"id="gameCanvas" width="320" height="480"></canvas>
Or use JavaScript like Pranay Ranasaid (it's better if you have other levels or if you have to change the background later) :)
或者像Pranay Rana所说的那样使用JavaScript （如果你有其他级别或者你以后必须改变背景会更好）:)
