问用全局复合操作实现形状的HTML5重叠

EN

您可以使用复合使您的海水无缝地侵入您的山地

特别是“源-出”组合只允许在不重叠任何现有内容的情况下绘制新内容。

因此，“源出”合成将允许您画新的海水，只有当它不重叠现有的山。

当水上升时：

1. 透明帆布
2. 设置globalCompositeOperation=“源-over”//默认情况下，新绘图将透支。
3. 画你的山
4. 设置globalCompositeOperation=“源出”//新的海水不会溢出现有的山脉。
5. 拉起上升的海水
6. 增加海水高度
7. 重复使用1号，直到你的海水达到所需的高度。

当水掉下来时：

1. 透明帆布
2. 设置globalCompositeOperation=“源-over”//默认情况下，新绘图将透支。
3. 画你的山
4. 设置globalCompositeOperation=“源出”//新的海水不会溢出现有的山脉。
5. 只在您的山的坑中提取保留的海水
6. 吸引掉的海水
7. 降低海水高度
8. 重复使用1号，直到你的海水达到所需的高度。

经过大量的思考，找到了一个两步的方法。

步骤-1 >>

1)海上取水(目的地) 2)设置ctx.globalCompositeOperation="destination-out"；3)引水池水(源)

这将消除部分源与dest的重叠。因此，用一个中空的空间(透明)代替水池来创造海水。现在，这个有洞的图像变成了最大的图像。图中我只需画池水，以保持水的一致性。

步骤2 >>

1)设置ctx.globalCompositeOperation="destination-atop"；2)抽池水(源)

这将是最吸引人的。只有在最好的地方。和源重叠，也就是dest的时候。在中空区域形成具有洞(透明代替池)和池重叠海水的图像。需要注意的是，池水就像海水的一个子集，所以我不需要担心池水(源)会像“目的地-顶楼”那样被创造出来。