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

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元素没有设计元素内处理层，则需要使用多个画布元素，而不是接近你的问题。

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

Answer 2

如果你想显示相同的层（画布）上的多张图像，然后订购的图片只是吸引他们到你希望他们显示顺序的画面。第一个绘制的图像将位于底部，每个绘制图形位于顶部。

如果你要正确对待层作为单独的画布，你可以使用CSS来设置的z-index，或使用JavaScript像这样：

canvas.style.zIndex = 99;