HTML画布冻结动画



我正在寻找使用这个插件。在我的版本中,我会有雪,一旦用户删除了50%的画布,我希望部分雪(画布)再次出现,就好像它再次冻结,但像有人在上面吹热空气一样缓慢动画。

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

有没有一种方法可以做到这一点?

"霜"效果如何

该演示的工作原理是将图像元素直接堆叠在画布元素下。

覆盖的画布用半透明的"霜"隐藏"该图像。霜由绘制在画布上的中等不透明度矩形组成。

通过使用合成来"擦除"用户拖动鼠标处的霜,效果"擦除"霜。"擦除"使用:

context.globalCompositeOperation="destination-out";
// Now all new drawings will "erase" any existing pixels 

在这种效果下,当用户拖动时绘制的新圆圈将"擦除"霜。

添加refrotting效果

如果你想"重新冻结"画布:

首先在数组中添加每个新拖动的圆的[x,y]。

然后创建一个动画循环,不断地重新绘制霜层。

  • 清除画布,

  • 重新冻结整个画布,

  • 从数组开始移除几个圆,

  • 重新绘制数组中每个剩余的圆,使用"destination-out"合成来擦除霜

最新更新