0

質問があります ！html5 キャンバスで、「x」個の画像を作成します。作成された最後のイメージは、常に他のイメージの上にあります。ライブラリを必要とせずに画像の深さを交換することは可能ですか? （変数の順序を逆にするつもりはありません）私はこのようなもの（運動なし）が欲しいです： http://www.html5canvastutorials.com/kineticjs/html5-canvas-shape-layering-with-kineticjs/

だから、ここに私が使用しているコードがあります:

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");  


    var imageObj = new Image();
    imageObj.onload = function() {
      context.drawImage(imageObj, 69, 50);
    };
    imageObj.src = "image1.png";

    var imageObj2 = new Image();
    imageObj2.onload = function() {
      context.drawImage(imageObj2, 40, 30);
    };
    imageObj2.src = "image2.png";

    /* I want to put "Image1.png" over "Image2.png" dynamically, for example, pressing a button, all this after render on the canvas */
4

3 に答える 3

1

画像を描く順序は重要です。最初に後ろの画像を描き、次に近くの画像を描く必要があります。

于 2012-07-31T19:21:22.930 に答える
1

最も遠いイメージを最初に描画します。画像を配列に入れてループできるようにすると役立つ場合があります。

それ以外の場合、あなたの例の場合、これはcontext.drawImage(imageObj, 69, 50);最後に描画しているため修正されます。紙に描くようなものだと考えてください。最後に描くものは、すでに描いたものの上にあります。

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");  

var imageObj2 = new Image();
imageObj2.onload = function() {
  context.drawImage(imageObj2, 40, 30);
};
imageObj2.src = "image2.png";

var imageObj = new Image();
imageObj.onload = function() {
  context.drawImage(imageObj, 69, 50);
};
imageObj.src = "image1.png";
于 2012-08-01T03:09:21.580 に答える
0

すべての画像に対してキャンバス オブジェクトを作成し、それらを表示/非表示にするか、z-index を調整してみませんか?

于 2012-07-31T19:20:49.997 に答える