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 回答