html canvas在動畫上結冰

Question

我正在看使用這個插件。在我的版本中，我會有雪，一旦用戶擦掉了50％的畫布，我想再次出現一部分雪（帆布），好像它再次凍結，但像有人正在吹熱氣一樣放慢動畫在上面。

http://minimal.be/lab/jQuery.eraser/

有沒有一種辦法，這能否實現？

Answer 1

的「霜」效果如何工作

這由canvas元素下直接堆疊的圖像元素演示作品。

疊加畫布「隱藏」該圖像的半透明「霜」。霜由在畫布上繪製的中等不透明矩形組成。

通過使用合成來「擦除」拖動鼠標的地方的霜，效果「擦除」了霜凍。 「刪除」，實現使用：

context.globalCompositeOperation="destination-out"; 

// Now all new drawings will "erase" any existing pixels 

在繪製爲用戶這種效果新圈子拖動將「擦除」的霜。

添加Refrosting效果

如果你想 「refrost」 畫布：

開始通過將每個新的拖累圈[X，Y]數組中。

然後創建一個連續重繪霜層的動畫循環。

• 清除畫布，

• Refrost整個畫布，

• 從陣列的開頭刪除幾個圈，

• 重繪陣列中的每個剩餘的圈使用「目的地出「合成來消除霜凍。