Question

我需要在画布上使用图层获得背景。变量为它的背景。我知道我应该使用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">

Answer 1

Canvas元素不是为了解决元素中的图层而设计的，而是需要使用多个canvas元素来解决问题。

Here's a good article to assist you with the approach

Answer 2

如果您想在同一图层（画布）上显示多个图像，那么订购图像只需按照您希望它们显示的顺序将它们绘制到屏幕上。第一个绘制的图像将位于底部，每个绘制图形位于顶部。

如果您想将图层视为单独的画布，可以使用css设置z-index，或者像这样使用Javascript：

canvas.style.zIndex = 99;

使用图层（zIndex）在画布中设置背景

2 个答案: