0

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

2 回答 2

1

Canvas 元素并非旨在解决元素内的图层,您需要使用多个画布元素来解决您的问题。

这是一篇很好的文章,可以帮助您使用该方法

于 2013-02-20T23:00:31.423 回答
0

如果您想在同一层(画布)上显示多个图像,那么要对图像进行排序,只需按照您希望它们显示的顺序将它们绘制到屏幕上即可。第一个绘制的图像将在底部,每个绘制的图像在顶部。

如果要将图层视为单独的画布,可以使用 css 设置 z-index,或使用 Javascript,如下所示:

canvas.style.zIndex = 99;
于 2013-02-21T01:26:11.850 回答