我想要做這個動畫 - 海水中的水位上升吞沒了有小坑的小山。當水消退時，它的一些留在口袋裏，再次當水位上升時，它全部成爲一個。這部動畫無限期地繼續。現在我已經嘗試過使用兩種方法來做這件事，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