javascript - 如何在 Canvas 中模拟 z-index

Question

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

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

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

Answer 1

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

基本上有两种绘图模型:

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

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

canvas 模型非常快，但是如果你想要一个绘图系统来管理你的对象，也许你需要 SVG反而。

---

如果你想使用 Canvas ，那么最好将你绘制的内容保留为对象。 这是我刚做的一个例子:我保留一个方形列表，每一秒我随机化它们的 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 对方形数组进行排序。这可以很容易地扩展到其他类型的对象。