我想要做这个动画 - 海水中的水位上升吞没了有小坑的小山。当水消退时，它的一些留在口袋里，再次当水位上升时，它全部成为一个。这部动画无限期地继续。现在我已经尝试过使用两种方法来做这件事，HTML5与全局复合操作的形状重叠
1）用海水中的水流绘制并清除池中的水。 ctx.bezierCurveTo（x1，y1，x2，y2，end_x，end_y）; 我用水流改变了第一个和第二个控制点，使底座从小平变为球形，反之亦然。但不光滑，第二个坑有不规则的基地，所以不可能。
2）我将所需的口袋装满了水，并且使用不透明度进行玩耍，以使淹没时口袋里的水与海水混合。这种方法再一次没有给出光滑的外观。
下面是它应该是什么样子：
基础图像是帆布的背景，我只是要控制水流。
请建议该怎么做。
可以使用合成有你的海水在你的山
特别是“源出”无缝侵入合成可以绘制新的内容只有在不重叠任何现有的内容。
因此，“源出”合成将允许您只在不与现有山重叠的地方绘制新的海水。
当水上升：
当水落下的高度：
经过多次思考后发现了两步法。
步骤-1 >>
1）画出在海（目标水） 2）设置ctx.globalCompositeOperation = “目的地出”; 3）绘制泳池水（来源）
这将删除与dest重叠的部分源。从而创造出具有中空空间（透明度）的海水代替泳池。现在这个带有洞的图像成为了dest。形象，我必须只画水池，以保持水的一致性。
步骤2 >>
1）设置ctx.globalCompositeOperation = “目的地顶上”; 2）吸取池水（来源）
这将绘制dest。只有在目的地。和源重叠，即当dest时。带孔的图像（透明度取代游泳池）和游泳池重叠的海水在中空区域创建。需要注意的一点 - 泳池水就像海水的一部分，所以我不必担心泳池水（来源）会像“目的地顶层”一样被创造出来。
我有一个山的背景图像，所以它只是海水和坑水，都是半透明的。代码流 - 1）ctx.globalCompositeOperation =“source-out”; 2）画海水 - 上升和下降3）坑水。组成的条件都不匹配，都是混合形成深色或在场景中提供透明的洞。 – user3275442
啊......我明白了。如果您的图纸缩小了alpha（不透明度），则合成将使用缩小的alpha进行混合。结果是你得到的混色。解决方法：您需要将缩小的alpha颜色简化为具有100％alpha的等效颜色。 – markE
你能解释一下吗？ – user3275442