html画布冻结动画 [英] html canvas freezing over animation

问题描述

我正在考虑使用这个插件。在我的版本中，我会有雪，一旦用户擦除了50％的画布我想再次出现雪（画布）的部分，好像它再次冻结，但像有人吹热风一样减速在上面。

I'm looking at using this plugin. In my version I would have snow and once the user has erased 50% of the canvas I'd like parts of the snow (canvas) to appear again, as if it were freezing over again but animating in slowing like someone were blowing hot air on it.

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

有没有办法实现这一目标？

Is there a way that this could be achieved?

推荐答案

霜冻效果如何工作

该演示通过直接在画布下堆叠图像元素来实现元件。

That demo works by stacking an image element directly under a canvas element.

叠加的画布隐藏了半透明霜冻的图像。霜冻由画布上绘制的中等不透明度矩形组成。

The overlaying canvas "hides" that image with a semi-transparent "frost". The frost consists of a medium-opacity rectangle drawn on the canvas.

效果通过使用合成来擦除霜冻来擦除霜冻老鼠。 删除是通过以下方式实现的：

The effect "erases" the frost by using compositing to "erase" the frost where the use drags the mouse. "Erasing" is achieved using:

context.globalCompositeOperation="destination-out";

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

在此效果中，用户拖动时绘制的新圆圈将擦除霜冻。

In this effect new circles drawn as the user drags will "erase" the frost.

添加重新生成效果

如果你想重新加画布：

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

Start by adding the [x,y] of each new dragged circle in an array.

然后创建一个动画循环，不断重绘霜层。

Then create an animation loop that continuously redraws the frost layer.

• 清除画布，

• Clear the canvas,

重新冻结整个画布，

删除几个从数组开始的圆圈，

Remove several circles from the beginning of the array,

使用destination-out合成重绘阵列中的每个剩余圆圈以消除霜冻。

Redraw each remaining circle in the array using "destination-out" compositing to erase the frost.

这篇关于html画布冻结动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！