js实现刮奖操作

支付宝经常支付完成,会出现一个刮奖的操作,这个需求在开发中也算比较常用的一个功能了。

1、原理:canvas与canvas的叠加

刮奖成功就是一张背景图,在背景图上方覆盖的灰色的canvas作为第一个图层,当我们用鼠标或者手指去触摸canvas图层时,再绘制第二个canvas图层。核心是

这个属性设定了在画新图形时采用的遮盖策略,其值是一个标识26种遮盖方式的字符串。26种遮盖方法如下:

2、逻辑实现

1、先在图片上画满一个遮罩层,就是简单canvas绘制矩形并且填充颜色,然后此canvas启用globalCompositeOperation = ‘destination-out’

2、画透明图层,当手指碰触到canvas时,则以手指与屏幕接触的坐标(x,y)画一个固定半径的小圆圈。这里还要减去canvas距离顶部(canvas.offsetTop)和左边的边距(canvas.offsetLeft),这个才是圆心的位置,然后半径取固定值20

3、判断是否中奖。启用globalCompositeOperation= = 'destination-out'之后,画的圆使得这个圆是透明的,根据这个条件可以进行判断有多少像素是透明的,就代表多少像素已经被刮了,当像素比例达到80%的时候,就认为刮奖结束。

canvas 可以通过getImageData转 base64 的图片,同时通过图片的data能够拿到像素的字节数据。

比较重要的点是:

拿到的像素字节数据是每四个长度表示一个像素,分别表示rgba。也就是说,下面代码中pxData[0]表示第一个像素的r,pxData[1]表示第一个像素的g,pxData[2]表示第一个像素的b,pxData[3]表示第一个像素的a,

因此下面代码中的循环是使用了 i += 4作为每次的step,同时获取的是 pxData[i+3],拿到的是alpha的数值

拿到 alpha 之后就能够通过 < 10 来判断是否是透明的

最后计算有多少透明的,如果这个比例高于 80% 则说明刮奖结束

4、监听事件

2019-10-10更新

可以将封面更换为我们自己设计师给的图片,具有更大的发挥空间,既将图片png转为canvas作为遮罩层

最后完成结果:

 

 

完整代码:https://github.com/huolala6/BlogCode/tree/master/001-js%E5%88%AE%E5%A5%96

 

欢迎转载,转载需带着文章出处链接~~

 

 

 

 

 

标签:

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据