使用图层或 z-index 在画布上绘制形状/文本
我使用 for 循环绘制几个文本元素。 但我希望第一个元素绘制在所有其他元素之上。 除了反转循环之外，还有其他方法可以为文本或形状等绘制元素定义图层编号吗？
I draw several text elements using a for loop.
But I want the first element to be drawn on top of all the other elments.
Other than reversing the loop, is there a way to define a layer number for a drawn element like text or shapes?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
不，HTML5 Canvas（与 SVG 一样）使用“画家模型”渲染时：涂在画布上的墨水立即干燥；连续的绘制调用位于结果之上。
此外，与 SVG 或 HTML 不同，HTML5 Canvas 使用非保留（或立即) 图形模式：发出原始绘图命令后，不会保留与原始绘图命令相对应的对象。
您的选择是：
更改您的循环，或以其他方式实现您自己的分层系统，该系统将绘制调用排队，然后按从下到上的顺序发出它们。
正如 @Stoive 建议的那样，以编程方式创建单独的（不显示的）画布元素，绘制它们，然后按照您喜欢的顺序将结果传输回主画布。
在页面上创建多个（显示的）画布，并使用 CSS 将它们分层，将每个画布绘制为自己的图层。
最后一个选项为您提供了最大的自由度，包括随时只弄脏/清除其中一个图层的能力，或者对图层重新排序而无需自己重新合成它们。
No, the HTML5 Canvas—like SVG—uses a "painters model" when rendering: the ink you lay down immediately dries on the canvas; successive draw calls go on top of the result.
Further, HTML5 Canvas—unlike SVG or HTML—uses a non-retained (or immediate) graphics mode: no objects are preserved corresponding to the original drawing commands after you have issued them.
Your options are:
Change your loop, or otherwise implement your own layering system that queues up draw calls and then issues them in order from bottom to top.
As @Stoive suggests, create separate (non-displayed) canvas elements programmatically, draw to them and then blit the results back to your main canvas in the order you like.
Create multiple (displayed) canvases on the page and layer them using CSS, drawing to each as its own layer.
The last option allows you the most freedom, including the ability to dirty/clear just one of the layers at any time, or re-order the layers without having to recomposite them yourself.
在 2D 上下文中，画布中没有图层的概念 - 将其视为类似画笔的可编程应用程序。
但是，您可以使用 context.drawImage 将一个画布绘制到另一个画布上 - 因此，如果您将每个“层”维护在它自己的画布中，然后将它们组合成一个用于显示，您可以模拟这一概念层数。
There is no concept of layers in
canvasin the 2D context - think of it as a programmable paintbrush-like application.You can, however, draw one canvas onto another using
context.drawImage- so if you maintain each 'layer' in it's own canvas, and then compose them into the one for display, you could emulate the concept of layers.