Как поменять местами изображения в HTML без библиотек (например, z-index)

У меня есть вопрос ! На холсте html5 я создаю «x» изображений. Последнее созданное изображение всегда находится над другим. Можно ли менять глубину изображений без использования библиотек? (Я не собираюсь менять порядок переменных) Я хочу что-то вроде этого (без кинетики): kineticjs/" rel="nofollow">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 */

canvas html z-index swap drawimage
person Italo Hernández    schedule 31.07.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Сначала нарисуйте самые дальние изображения. Это может помочь поместить изображения в массив, чтобы вы могли просто перебирать их.

В противном случае, в случае вашего примера, это исправит это, поскольку вы рисуете 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";
person Jarrod    schedule 01.08.2012

arrow_upward
1
arrow_downward

Порядок, в котором вы рисуете изображения, имеет значение. Сначала вам нужно будет нарисовать изображения сзади, а затем нарисовать ближние.

person trumank    schedule 31.07.2012
comment
Проблема в том, что я создаю своего рода лес, я думаю около 30 или 40 деревьев, которые находятся близко к пользователю, как если бы он шел. Но деревья, которые рождаются в конце, стоят выше тех, что были первыми. (Прикрепленное изображение) ссылка - person Italo Hernández; 31.07.2012

arrow_upward
0
arrow_downward

Почему бы вам не создать объект холста для каждого изображения и либо показать/скрыть их, либо настроить z-индекс?

person Kees de Kooter    schedule 31.07.2012
comment
Если так... У вас может и вовсе не быть холстов. - person trumank; 31.07.2012