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

我在画布中绘制多幅图像，但我希望用户能够定义图像的重叠。换句话说，用户选择显示在前面的图像和显示在后面的图像。

---

我怎样才能做到这一点呢？

你可以做到这一点，假设你只想在画布上渲染下一幅图像，在已经渲染的图像的“前面”或“后面”（即不在画布上已经渲染的两幅图像之间后期渲染图像）使用2d画布上下文的

globalCompositeOperation

属性。MDN拥有和。基本上，在您的情况下，如果要渲染“上面”的下一个图像，您将使用

“源位置”

作为此属性的值，如果要在现有内容后面渲染，请使用

“目标位置”

---

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

您可以完成这一步，假设您只关心使用2d画布上下文的

globalCompositeOperation

属性将下一个图像渲染到画布上已渲染图像的“前面”或“后面”（即不在画布上已渲染的两个图像之间“事后渲染图像”）。MDN拥有和。基本上，在您的情况下，如果要渲染“上面”的下一个图像，您将使用

“源位置”

作为此属性的值，如果要在现有内容后面渲染，请使用

“目标位置”

---

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

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

---

我在将图像放在前面时使用的一种解决方案是，当选择图像时，将所有图像存储在数组中-这也是绘制顺序-要放在顶部的图像只需从数组中取出并放在末尾，从而位于顶部。

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

---

我在将图像放在前面时使用的一种解决方案是，当选择图像时，将所有图像存储在数组中-这也是绘制顺序-将位于顶部的图像简单地从数组中取出并放置在末尾，从而位于顶部。

在创建randering图表的div时使用“最小高度”和“最小宽度”

为randering图表创建div时使用“最小高度”和“最小宽度”

通过使用

z-index

或者我缺少一些信息？z-index对在画布上绘制图像没有帮助。您应该清除画布并根据所需索引（首先是最低的索引）重新绘制所有图像。您的意思是要在单个画布上还是在多个画布上绘制多个图像？此外，您想在单个画布上完成什么：更改图像的顺序或处理用户输入。我已经这么做了。我只遗漏了重叠部分。使用

z-index

还是遗漏了一些信息？z-index对在画布上绘制图像没有帮助。您应该清除画布并根据所需索引（首先是最低的索引）重新绘制所有图像。您的意思是要在单个画布上还是在多个画布上绘制多个图像？此外，您想在单个画布上完成什么：更改图像的顺序或处理用户输入。我已经这么做了。我只想念重叠的部分。。