Ensemble de canevas HTML5 z-index

Question

Est-il possible de définir le z-index d'un objet dessiné dans un canevas HTML5 ?

J'essaie de l'obtenir pour qu'un objet puisse être devant le "joueur" et un autre objet derrière le "joueur"

Answer 1

Ou vous pouvez simplement utiliser un tableau contenant vos objets à dessiner puis trier ce tableau en utilisant la zIndex de chaque enfant. Ensuite, vous itérez ce tableau et dessinez.

 var canvas = document.querySelector('#game-canvas');
var ctx = canvas.getContext('2d');

// Define our shape "class".
var Shape = function (x, y, z, width, height) {
  this.x = x;
  this.y = y;
  this.zIndex = z;
  this.width = width;
  this.height = height;
};
// Define the shape draw function.
Shape.prototype.draw = function () {
  ctx.fillStyle = 'lime';
  ctx.fillRect(this.x, this.y, this.width, this.height);
};

// let's store the objects to be drawn.
var objects = [
  new Shape(10, 10, 0, 30, 30), // should be drawn first.
  new Shape(50, 10, 2, 30, 30), // should be drawn third.
  new Shape(90, 10, 1, 30, 30)  // should be drawn second.
];

// For performance reasons, we will first map to a temp array, sort and map the temp array to the objects array.
var map = objects.map(function (el, index) {
  return { index : index, value : el.zIndex };
});

// Now we need to sort the array by z index.
map.sort(function (a, b) {
  return a.value - b.value;
});

// We finaly rebuilt our sorted objects array.
var objectsSorted = map.map(function (el) {
  return objects[el.index];
});

// Now that objects are sorted, we can iterate to draw them.
for (var i = 0; i < objectsSorted.length; i++) {
  objectsSorted[i].draw();
}

// Enjoy !

Notez que je n'ai pas testé ce code et que je l'ai écrit sur mon portable, il peut donc y avoir des fautes de frappe, mais cela devrait permettre de comprendre le principe, j'espère.

Answer 2

Dessinez d'abord les choses derrière, puis la chose, puis les autres objets.

Pour effectuer des tests d'atteinte, vous devrez peut-être parcourir votre liste d'affichage en arrière, en testant chaque objet. Cela fonctionnera si vous connaissez très bien les limites de l'objet.

Ou vous pouvez essayer quelques astuces graphiques standard comme dessiner les mêmes objets sur un autre canevas en mémoire avec des couleurs uniques pour chaque objet dessiné : pour tester ceci, vérifiez simplement la couleur des pixels sur le canevas en mémoire. Soigné ;-)

Answer 3

Désolé, mais non, l'élément canvas aura son z-index et tout ce qui est dessiné dessus sera sur ce calque.

Si vous faites référence à différentes choses sur la toile, alors oui, tout ce qui est dessiné est dessiné au-dessus de ce qui s'y trouvait auparavant.