使用图层在画布中设置背景(zIndex)
使用图层在画布中设置背景(zIndex)
提问于 2013-02-21 06:38:23
我需要在画布上得到一个使用层的背景。变量作为它的背景。我知道我应该使用CSS并设置z-index，但不知道在这种情况下该如何做。
JS：
function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
var item1 = new Image();
item1.src = "images/sheep.png";
item1.addEventListener("load", function() { canvas.drawImage(item1,20,300)}, false);
var item2 = new Image();
item2.src = "images/tshirt.png";
item2.addEventListener("load", function() { canvas.drawImage(item2,300,300)}, false);
var background = new Image();
background.src = "images/background.png";
background.addEventListener("load", function() { canvas.drawImage(background,0,0,1024,768)}, false);
}HTML：
<canvas id="canvas" width="1024" height="768"> 回答 2
Stack Overflow用户
回答已采纳
发布于 2013-02-21 07:00:31
Canvas元素并不是为解决元素中的层而设计的，您需要使用多个canvas元素来解决您的问题。
Here's a good article to assist you with the approach
Stack Overflow用户
发布于 2013-02-21 09:26:12
如果您想要在同一层(画布)上显示多个图像，那么要对图像进行排序，只需按照您希望它们显示的顺序将它们绘制到屏幕上即可。第一个绘制的图像将位于底部，而每个绘制的图像将位于顶部。
如果要将层视为单独的画布，可以使用css来设置z索引，或使用Javascript，如下所示：
canvas.style.zIndex = 99;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14991286
复制相关文章
相似问题
腾讯云开发者
