微信小程式 canvas實現刮刮樂效果

canvas設定背景圖，作為中獎；

在canvas上繪製刮的灰色塗層；

通過繫結的事件，清除對應區域的塗層；

最後判斷塗層清除區域是否超過設定的可見百分比，如果超過則全部塗層清除，否則不清楚。

獲取使用者傳入的canvas的id，設定的canvas的寬高，canvas塗層的顏色，清除當前座標的半徑和直徑，計算當前清除的面積，全部清除百分比，canvas的面積。

constructor(page,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 = this.size * 2;
this.area = this.r * this.r; 
this.scale = opts.scale || 0.75;
this.totalarea = this.width * this.height;
this.init();
}

1、變數：判斷清除全部塗層的布林值，記錄清除座標的陣列。

2、api：呼叫建立canvas繪圖上下文api。

3、方法：呼叫塗層繪製函式，呼叫事件繫結函式。

init()

drawmask()

1 、touchstart事件只是清除當前位置的座標點半徑的塗層。

2 、touchmove事件清除移動過程個座標點半徑內的塗層。

3 、touchend事件判斷當前次清除是否超過總面積的75%，超過則全部清除，否則不做處理。

bindtouch()

_this
.page
.ontouchmove = function (e) 
_this
.page
.ontouchend = function (e) 
}}

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.clearrect(x1, y1, this.r, this.r);
this.ctx.draw(true);
}

最重要的是判斷清除塗層在總canvas面積的占有率記錄，只要判斷該座標不在清除的範圍，就可以記錄該座標。

我的csdn部落格，歡迎交流！

前端筆記專欄

前端筆記列表

遊戲列表

微信小程式 canvas實現刮刮樂效果

canvas設定背景圖，作為中獎 在canvas上繪製刮的灰色塗層 通過繫結的事件，清除對應區域的塗層 最後判斷塗層清除區域是否超過設定的可見百分比，如果超過則全部塗層清除，否則不清楚。獲取使用者傳入的canvas的id，設定的canvas的寬高，canvas塗層的顏色，清除當前座標的半徑和直徑，計...

微信小程式canvas實現刮刮樂效果

效果圖 設計流程 設計思路 1 全域性常量 獲取使用者傳入的canvas的id，設定的canvas的寬高，canvas塗層的顏色，清除當前座標的半徑和直徑，計算當前清除的面積，全部清除百分比，canvas的面積。constructor page,opts this.page page 程式設計客棧 ...

刮刮樂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...