javascript 如何在画布中模拟 z-index

How can I simulate z-index in canvas

提问by JalalJaberi

I have asked a question before: How can I control z-index of canvas objects?and we reached to a solution that may not be a good one for complicated situations.

我之前问过一个问题：如何控制画布对象的 z-index？我们达成了一个解决方案，但对于复杂的情况可能不是一个好的解决方案。

I found that canvas doesn't have a z-index system, but a simple ordered drawing one. Now there is a new question: how can I simulate z-index system to make this problem fixed in complicated situations?

我发现画布没有 z-index 系统，而是一个简单的有序绘图系统。现在有一个新问题：如何在复杂情况下模拟z-index系统来解决这个问题？

The good answer can solve a big problem.

好的答案可以解决一个大问题。

回答by Denys Séguret

It's not that canvas doesn't have a z-index, it's that canvas doesn't keep objects drawn contrary to the HTML page. It just draws on the pixel matrix.

并不是画布没有 z-index，而是画布不会保留与 HTML 页面相反的对象。它只是在像素矩阵上绘制。

There are basically two types of drawing models :

基本上有两种类型的绘图模型：

• object ones (usually vector) : objects are kept and managed by the engine. They can usually be removed or changed. They have a z-index
• bitmap ones : there are no objects. You just change a pixel matrix

• 对象（通常是向量）：对象由引擎保存和管理。通常可以删除或更改它们。他们有一个 z-index
• 位图：没有对象。你只需改变一个像素矩阵

The Canvas model is a bitmap one. To have objects drawn over other ones, you must draw them after. This means you must manage what you draw.

Canvas 模型是位图模型。要在其他对象上绘制对象，您必须在 之后绘制它们。这意味着您必须管理您绘制的内容。

The canvas model is very fast, but if you want a drawing system managing your objects, maybe you need SVGinstead.

画布模型非常快，但如果您想要一个绘图系统来管理您的对象，也许您需要SVG。

---

---

If you want to use a canvas, then the best is to keep what you draw as objects. Here's an example I just made : I keep a square list and every second I randomize their zindex and redraw them :

如果您想使用画布，那么最好将您绘制的内容保留为对象。这是我刚刚制作的一个示例：我保留一个方形列表，每秒我都会随机化它们的 zindex 并重新绘制它们：

var c = document.getElementById('c').getContext('2d');
function Square(x, y, s, color) {
   this.x = x; this.y = y; this.s = s; this.color = color;
   this.zindex=0;
}
Square.prototype.draw = function(c) {
  c.fillStyle = this.color;
  c.fillRect(this.x, this.y, this.s, this.s);  
}
var squares = [
  new Square(10, 10, 50, 'blue'), new Square(40, 10, 40, 'red'), new Square(30, 50, 30, 'green'),
  new Square(60, 30, 40, '#111'), new Square(0, 30, 20, '#444'), new Square(70, 00, 40, '#999')
];

function draw() {
  c.fillStyle = "white";
  c.fillRect(0, 0, 1000, 500);
  for (var i=0; i<squares.length; i++) squares[i].draw(c);
}
setInterval(function(){
  // give all squares a random z-index
  squares.forEach(function(v){v.zindex=Math.random()});
  // sort the list accordingly to zindex
  squares.sort(function(a,b){return a.zindex-b.zindex});
  draw();
}, 1000);

Demonstration

示范

The idea is that the square array is sorted accordingly to zindex. This could be easily extended to other types of objects.

这个想法是根据 zindex 对方形数组进行排序。这可以很容易地扩展到其他类型的对象。

回答by Ian Clelland

As dystroy has said, z-index is, at its simplest, just an index to tell you in what order to draw things on the canvas, so that they overlap properly.

正如dystroy所说，最简单的z-index只是一个索引，告诉您在画布上以什么顺序绘制事物，以便它们正确重叠。

If you mean to do more than this, say to replicate the existing workings of a browser, then you would have more work to do. The order in which objects are drawn in a browser is a complicated calculation that is driven by:

如果您想做的不止这些，比如复制浏览器的现有工作，那么您将有更多的工作要做。在浏览器中绘制对象的顺序是一个复杂的计算，由以下因素驱动：

1. The DOM tree
2. Elements' positionattributes
3. Elements' z-indexattributes

1. DOM 树
2. 元素position属性
3. 元素z-index属性

The canonical source to this is the Elaborate description of Stacking Contexts, part of the CSS specification.

对此的规范来源是Stacking Contexts的详细描述，它是 CSS 规范的一部分。