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

Question

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

Answer 1

在创建用于行进图表的div时，请使用“最小高度”和“最小宽度”。

Answer 2

你可以做到这一点，假设你只关心将下一个图像渲染到画布上“前面”或“后面”已经渲染的图像（即不要事后渲染图像'两个'之间'已使用2d画布上下文的globalCompositeOperation属性在画布上呈现的图像。 MDN有an illustrative example和comprehensive documentation。基本上，在您的情况下，如果您要将下一个图像渲染到“上方”​​，则可以使用"source-over"作为此属性的值，如果要将其呈现在现有内容后面，请使用"destination-over"。

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

Answer 3

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

我将图像放到前面时使用的解决方案，当它被选中时，是将所有图像存储在数组中 - 这也是绘制顺序 - 并且顶部的图像只是从数组中取出并放在最后，因此在顶部。