网页特效——刮刮效果实现。
首先分析一下,实现刮刮效果的原理,需要用到html5中的画布canvas,这是一个强大的提供绘制功能的标签,主要用在网页中的图表呈现,比如一些折线图、扇形图等,甚至在游戏开发当中也有广泛的运用,过多的介绍就不多说,刮刮效果需要会使用canvas实现基本的路径绘制,另外需要知道如何获取手指在页面当中的位置(方便跟踪手指移动并绘制),其次需要用到一个核心属性globalCompositeOperation,该属性设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上,其属性值很多,请看下图,其中红色框选出来的属性值是刮刮效果实现的取值,新图像会以透明的效果出现:
需要设置canvas背景图如下:
接下来绘制一个与画布等宽高的矩形(已有图)以覆盖背景,如何再次绘制一个小矩形(新图),我们先测试一下核心属性,此时会看到下面的效果,通过小矩形(新图)透明效果看到了里面的背景奖项:
代码如下:
到这里那么实现刮刮效果就非常简单了,只需要将绘制的新图小矩形,换成鼠标追踪手指的位置即可,然后通过路径绘制的方式绘制出每一次鼠标点击移动的路径,代码如下:
最后看一下效果:
时间: 2024-10-08 00:52:19