HTML5与全局复合操作重叠形状

Question

我想做这个动画 - 海水中的水位上升吞没了一个有坑的小山。当水退去时，一些水会停留在口袋中，当水位上升时，水也会变成一个。这个动画无限期地继续。现在我尝试使用两种方法来做到这一点，

1）用海水中的水流吸取并清理池中的水。 ctx.bezierCurveTo（X1，Y1，X2，Y2，end_x，end_y）; 我用水流改变了第一和第二控制点，使基部从小平面变为球形，反之亦然。但是不顺利，第二个坑也有不规则的基础，所以不可能。

2）我把所需的口袋装满水并且不透明，以便口袋水在浸没时与海水混合。同样，这种方法并不能让人看上去顺利。

这是它应该是什么样子：

基础图像是画布的背景，我只需控制水流量。

请建议做什么。

Answer 1

您可以使用合成让您的海水无缝地侵入您的山峰

特别是“source-out”合成允许您仅在不与任何现有内容重叠的地方绘制新内容。

因此，“源出”合成将允许您在不与现有山峰重叠的地方绘制新的海水。

当水涨起时：

1. clear canvas
2. 设置globalCompositeOperation =“source-over”//默认情况下，新图纸会透支
3. 画你的山
4. 设置globalCompositeOperation =“source-out”//新海水不会透支现有的山脉
5. 画上升的海水
6. 增加海水高度
7. 重复＃1，直到海水达到所需高度

当水落下时：

1. clear canvas
2. 设置globalCompositeOperation =“source-over”//默认情况下，新图纸会透支
3. 画你的山
4. 设置globalCompositeOperation =“source-out”//新海水不会透支现有的山脉
5. 仅在您的山坑中吸取保留的海水
6. 画下落海水
7. 降低海水高度
8. 重复＃1，直到海水达到所需高度

Answer 2

经过多次思考后发现了一个两步法。

步骤1＆gt;＆gt;

1）在海中取水（目的地） 2）设置ctx.globalCompositeOperation =“destination-out”; 3）抽水池（来源）

这将删除与dest重叠的部分源。从而创造出具有空心空间（透明度）的海水代替水池。现在这个带孔的图像成为了目标。我必须只画水池水，以保持水的一致性。

步骤2＆gt;＆gt;

1）设置ctx.globalCompositeOperation =“destination-atop”; 2）抽水池（来源）

这将绘制dest。只有在哪里。和源重叠，即当dest。在空心区域创建带孔的图像（代替池的透明度）和池重叠海水。值得注意的是 - 泳池水就像海水的一部分，因此我不必担心池水（源）会像“目的地 - 顶层”一样被创建。