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 に答える