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

问题描述 投票:0回答:3

我在画布上绘制多个图像,但是我希望用户能够定义图像的重叠。换句话说,用户选择出现在前面的图像,然后选择出现在后面的图像。我该怎么做到?

javascript html5 canvas html5-canvas
3个回答
1
投票

[您可以完成此操作,假设您只想将下一个图像渲染在画布上已渲染的图像的“前”或“后”(即不要在两个图像之间“事后渲染”图像)您已经在画布上渲染),则使用2d画布上下文的globalCompositeOperation属性。 MDN具有an illustrative examplecomprehensive documentation。基本上,如果您要在“上方”渲染下一个图像,则可以使用"source-over"作为此属性的值,如果要在现有内容之后渲染,请使用"destination-over"

如果要对两张以上图像的重叠进行更详细的控制,则必须按照到目前为止的注释中的建议调整它们的渲染顺序(即,将图像放入数组中,然后在所需的时尚,然后进行渲染)。


0
投票

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

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


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.