效果圖
設計流程
設計思路
1、全域性常量
獲取使用者傳入的canvas的id，設定的canvas的寬高，canvas塗層的顏色，清除當前座標的半徑和直徑，計算當前清除的面積，全部清除百分比，canvas的面積。
constructor(page,opts);
this.page = page;
程式設計客棧 www.cppcns.comthis.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 = this.size * 2;
this.area = this.r * this.r;
this.scale = opts.scale || 0.75;
this.totalarea = this.width * this.height;
this.init();
}2、初始化全域性變數
1、變數：判斷清除全部塗層的布林值，記錄清除座標的陣列。
2、api：呼叫建立canvas繪圖上下文api。
3、方法：呼叫塗層繪製函式，呼叫事件繫結函式。
init()
3、塗層繪製函式的實現
drawmask程式設計客棧()
4、事件繫結函式的實現
1 、touchstart事件只是清除當前位置的座標點半徑的塗層。
2 、touchmove事件清除移動過程個座標點半徑內的塗層。
3 、touchend事件判斷當前次清除是否超過總面積的75%，超過則全部清除，否則不做處理。
bindtouch()
_this.page.ontouchmove = function (e)
_this.page.ontouchend = function (e)
}}5、eraser橡皮擦函式的實現
1、獲取記錄清除座標點陣列的長度，當前位置的x,y座標，計算清除塊的起點，宣告計數變數。
2、判斷是否是第一次進入，是則直接記錄該座標。
3、判斷當前點在記錄陣列中是否存在，如果存在，直接返回，如果不存在，在記錄入陣列。
4、是否滿足清除全部塗層，滿足show賦值為true，不滿足，直接清除當前座標塗層。
eraser(e,bool))
} for (let val of this.clearpoints)else
} if(len === count))
} if (this.clearpoints.length && this.r * this.r * this.clearpoints.length > this.scale * this.totalarea)
this.ctx.clearre y1, this.r, this.r);
this.ctx.draw(true);
}提供的其他實現思路
方法一：本文提供的方法是將中獎作為背景設定給canvas，然後清除canvas塗層來實現刮刮樂效果。
方法二：canvas繪製塗層，然後取在canvas相同座標的畫素，最後將該處畫素繪製到canvas。
方法三：類似方法一，只是將背景直接用img.定位在canvas的下邊。
總結最重要的是判斷清除塗層在總canvas面積的占有率記錄，只要判斷該座標不在清除的範圍，就可以記錄該座標。
本文標題: 微信小程式canvas實現刮刮樂效果
本文位址:
微信小程式 canvas實現刮刮樂效果
canvas設定背景圖，作為中獎 在canvas上繪製刮的灰色塗層 通過繫結的事件，清除對應區域的塗層 最後判斷塗層清除區域是否超過設定的可見百分比，如果超過則全部塗層清除，否則不清楚。獲取使用者傳入的canvas的id，設定的canvas的寬高，canvas塗層的顏色，清除當前座標的半徑和直徑，計...
微信小程式 canvas實現刮刮樂效果
canvas設定背景圖，作為中獎 在canvas上繪製刮的灰色塗層 通過繫結的事件，清除對應區域的塗層 最後判斷塗層清除區域是否超過設定的可見百分比，如果超過則全部塗層清除，否則不清楚。獲取使用者傳入的canvas的id，設定的canvas的寬高，canvas塗層的顏色，清除當前座標的半徑和直徑，計...
刮刮樂canvas實現
class scratch config this.movenum 0 this.clearrange clearrange 2 this.canvasid canvasid this.radius radius 25 this.canvas this.canvasid this.ifend fal...