如何在画布中模拟z-index

Question

我之前问了一个问题：How can I control z-index of canvas objects?我们找到了一个解决方案，对于复杂的情况可能不是一个好的解决方案。

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

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

Answer 1

并不是画布没有z索引，而是画布不会使对象与HTML页面相反。它只是绘制像素矩阵。

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

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

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

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

---

如果你想使用画布，那么最好是保留你画的对象。 这是我刚才做的一个例子：我保留一个方形列表，每一秒我随机化他们的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

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

Answer 2

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

如果您的意思是做更多的事情，比如复制浏览器的现有工作方式，那么您还有更多工作要做。在浏览器中绘制对象的顺序是一个复杂的计算，由下式驱动：

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

这个规范的来源是Elaborate description of Stacking Contexts，是CSS规范的一部分。