我在画布上绘制多个图像,但是我希望用户能够定义图像的重叠。换句话说,用户选择出现在前面的图像,然后选择出现在后面的图像。我该怎么做到?
[您可以完成此操作,假设您只想将下一个图像渲染在画布上已渲染的图像的“前”或“后”(即不要在两个图像之间“事后渲染”图像)您已经在画布上渲染),则使用2d画布上下文的globalCompositeOperation
属性。 MDN具有an illustrative example和comprehensive documentation。基本上,如果您要在“上方”渲染下一个图像,则可以使用"source-over"
作为此属性的值,如果要在现有内容之后渲染,请使用"destination-over"
。
如果要对两张以上图像的重叠进行更详细的控制,则必须按照到目前为止的注释中的建议调整它们的渲染顺序(即,将图像放入数组中,然后在所需的时尚,然后进行渲染)。
顶部的图像始终是最后绘制的图像。
当选择图像时,将图像放置在最前面时,我使用的解决方案是将所有图像存储在数组中-这也将是绘制顺序-将位于顶部的图像简单地从数组中取出并放在末尾,因此位于顶部。
在创建用于行进图表的div时,请使用“最小高度”和“最小宽度”。