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

Question

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

Answer 1

使用“min-height”和“min-width”创建 div 用于排序图表。

Answer 2

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

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

Answer 3

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

我在将图像放在前面时使用的一种解决方案，当它被选中时，将所有图像存储在数组中 - 这也将是绘制顺序 - 并且要位于顶部的图像只是从数组中取出并放置在结束，因此处于顶部。