刮刮乐微信html5源码,微信小程序canvas实现刮刮乐效果

微信小程序canvas实现刮刮乐效果

来源：中文源码网    浏览： 次    日期：2018年9月2日

【下载文档:  微信小程序canvas实现刮刮乐效果.txt 】

(友情提示:右键点上行txt文档名->目标另存为)

微信小程序canvas实现刮刮乐效果 本文实例为大家分享了微信小程序实现刮刮乐效果的具体代码，供大家参考，具体内容如下

效果图设计流程设计思路 canvas设置背景图，作为中奖图片；

在canvas上绘制刮的灰色涂层；

通过绑定的事件，清除对应区域的涂层；

最后判断涂层清除区域是否超过设置的可见百分比，如果超过则全部涂层清除，否则不清楚。

1、全局常量

获取用户传入的canvas的ID，设置的canvas的宽高，canvas涂层的颜色，清除当前坐标的半径和直径，计算当前清除的面积，全部清除百分比，canvas的面积。constructor(page,opts){

opts = opts || {};

this.page = page;

this.canvasId = opts.canvasId || 'luck';

this.width = opts.width || 300;

this.height = opts.height || 150;

this.maskColor = opts.maskColor || '#dddddd';

this.size = opts.size || 8;

this.r