html5画布绘制多个图像并重叠

Question

我在画布上绘制了多个图像，但我希望用户能够定义图像的重叠。 换句话说，用户选择出现在前面的图像和出现在后面的图像。 我怎么能做到这一点？

Answer 1

在为 randering 图表创建 div 时使用“min-height”和“min-width”。

Answer 2

您可以做到这一点，假设您只关心将下一个图像渲染在已经渲染的图像“前面”或“后面”的画布上（即不要事后渲染图像“介于”已经渲染的两个图像之间）渲染在画布上）使用 2d 画布上下文的globalCompositeOperation属性。 MDN 有一个说明性的例子和全面的文档。 基本上，在您的情况下，如果您想在“上方”呈现下一张图像，您可以使用"source-over"作为此属性的值，如果您想将其呈现在现有内容的后面，请使用"destination-over" 。

如果您想更详细地控制超过 2 个图像的重叠，则必须按照目前评论中的建议调整它们的呈现顺序（即将图像放入数组中，以所需的方式对数组进行排序） ，然后渲染它们）。

Answer 3

顶部的图像始终是最后绘制的图像。

我在将图像置于最前面时使用的解决方案是将所有图像存储在数组中 - 这也将是绘制顺序 - 顶部的图像只是从数组中取出并放置在最终，因此处于领先地位。