使用图层或z-index在画布上绘制形状/文本

Question

我使用for循环绘制了几个文本元素。但是我希望第一个元素在所有其他元素的上方绘制。 除了反转循环之外，是否有一种方法可以为绘制的文本或形状定义图层编号？

- tzippy

Answer 1

不，HTML5 Canvas - 像SVG一样 - 在渲染时使用"画家模型"：你放下的墨水会立即在画布上干燥；连续的绘制调用会覆盖之前的结果。

此外，HTML5 Canvas - 不像SVG或HTML - 使用非保留（或直接）图形模式：在发出原始绘图命令后，没有对象与之对应被保留。

你的选项是：

• 更改循环，或以其他方式实现自己的分层系统，将绘制调用排队，然后按从底部到顶部的顺序发出它们。

• 如@Stoive建议的那样，通过编程方式创建单独的（非显示）画布元素，向它们绘制，然后按你喜欢的顺序将结果转移到主画布中。

• 在页面上创建多个（显示的）画布，并使用CSS进行层叠，每个画布都作为自己的层进行绘制。

最后一个选项让你拥有最大的自由度，包括随时清除/恢复单个图层，或者重新排列图层而无需自己重新合成它们。

- Phrogz

Answer 2

canvas在2D上下文中没有图层的概念——可以将其视为可编程的画笔应用程序。

但是，您可以使用context.drawImage将一个画布绘制到另一个画布上——因此，如果您将每个“图层”保留在自己的画布中，然后将它们组合成一个显示，就可以模拟图层的概念。

- Stoive