在没有多个画布的情况下分层画布

Posted 2023-05-08

【中文标题】在没有多个画布的情况下分层画布

【英文标题】：Layering The Canvas Without Multiple Canvases

【发布时间】：2020-08-25 06:25:39

【问题描述】：

我正在html、Jquery 和javascript 中创建邮票制造商。在我的应用程序图像的编辑器中添加到HTML 画布（简单）以及文本，我只是创建新的线元素，然后将其附加到画布。但问题是我希望我的图像在后面文本。我用谷歌搜索了很多，还搜索了*** 我得到了创建多个画布的解决方案，但最后我必须下载画布以供用户使用。有问题。我想将整个画布与文本一起导出第一张和第二张图像。如果我为文本创建单独的画布，为图像创建另一个画布并给图像一个低 zindex 会很好，但会有一个画布作为图像导出。 链接到画布中的多个图层 html5 - canvas element - Multiple layers 我希望我们能想出一个想法，即如何将两个画布下载为图像，或者找到一种将图像带到画布背面的方法。 任何答案将不胜感激。

【参考方案1】：

如果您将文本、第二张图片和第一张图片存储在变量中，您可以按照您喜欢的顺序在画布上绘制它们。这意味着，每当图像或文本发生变化时，您都应该清理画布并重新绘制所有内容。

另外，您可能对Compositing 感兴趣，因为它允许您决定相对于现有绘图（顶部、后面等）绘制新对象的位置