介绍 <李> 构造函数(页面,选择){=,,opts opts | |, {};=,this.page 页面;=,,this.canvasId opts.canvasId | |, & # 39;运气# 39;;=,,this.width opts.width | |, 300;=,,this.height opts.height | |, 150;=,,this.maskColor opts.maskColor | |, & # 39; # dddddd& # 39;;=,,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 ();
} init () {=,this.show 假;=,this.clearPoints [];=,,this.ctx wx.createCanvasContext (this.canvasId,,);
,this.drawMask ();
,this.bindTouch ();
} drawMask () {
,this.ctx.setFillStyle (this.maskColor);
,this.ctx.fillRect(0, 0,上,,this.height);
,this.ctx.draw ();
} bindTouch () {=,const _this ;=,_this.page.onTouchStart 函数(e) {
_this.eraser才能(e,真实);
,}=,,_this.page.onTouchMove function (e), {
_this.eraser才能(e);
,}=,,_this.page.onTouchEnd function (e), {
如果才能(_this.show) {
,,_this.ctx.clearRect (0, 0, _this.width,, _this.height);
,,_this.ctx.draw ();
,,}
,}
} 橡皮擦(e, bool) {
let 才能;len =, this.clearPoints.length;
let 才能;count =0
let 才能;x =, e.touches [0]。x,, y =, e.touches [0] .y;
let 才能;x1 =, x 作用;size;
let 才能;y1 =, y 作用;size;
如果才能(bool) {
,,this.clearPoints.push ({
,,,x1:, x1,
,,,y1:, y1,
,,,x2:, x1 +, this.r,
,,,y2:, y1 + this.r
,,})
,,}
for 才能;(let val of this.clearPoints) {
,,如果(val.x1 祝辞,x | |, val.y1 祝辞,y | |, val.x2 & lt;, x | |, val.y2 & lt;, y) {
,,,计数+ +;
其他,,}{
,,,休息;
,,}
,,}
如果才能(len ===, count) {
,,this.clearPoints.push ({
,,,x1:, x1,
,,,y1:, y1,
,,,x2:, x1 +, this.r,
,,,y2:, y1 + this.r
,,})
,,}
if 才能;(this.clearPoints.length ,,, this.r *, this.r *, this.clearPoints.length 祝辞,this.scale *, this.totalArea) {
,,this.show =,真的;
,,}
this.ctx.clearRect才能(x1, y1,, this.r,, this.r);
this.ctx.draw才能(真正的);
以前,}
这篇文章主要介绍了微信小程序帆布怎么实现刮刮乐效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
效果图
设计流程
<强>设计思路
画布上设置背景图,作为中奖图片;
<李>在画布上绘制刮的灰色涂层;
<李>通过绑定的事件,清除对应区域的涂层;
<李>最后判断涂层清除区域是否超过设置的可见百分比,如果超过则全部涂层清除,否则不清楚。
<强> 1,全局常量
获取用户传入的画布的ID,设置的画布的宽高,画布涂层的颜色,清除当前坐标的半径和直径,计算当前清除的面积,全部清除百分比,画布的面积。
<强> 2,初始化全局变量
1,变量:判断清除全部涂层的布尔值,记录清除坐标的数组。
2, API:调用创建帆布绘图上下文API。
3,方法:调用涂层绘制函数,调用事件绑定函数。
<强> 3,涂层绘制函数的实现
<强> 4,事件绑定函数的实现
1, touchstart事件只是清除当前位置的坐标点半径的涂层。
2, touchmove事件清除移动过程个坐标点半径内的涂层。
3, touchend事件判断当前次清除是否超过总面积的75%,超过则全部清除,否则不做处理。
<强> 5,橡皮擦橡皮擦函数的实现
1,获取记录清除坐标点数组的长度,当前位置的x, y坐标,计算清除块的起点,声明计数变量。
2,判断是否是第一次进入,是则直接记录该坐标。
3,判断当前点在记录数组中是否存在,如果存在,直接返回,如果不存在,在记录入数组。
4,是否满足清除全部涂层,满足显示赋值为真,不满足,直接清除当前坐标涂层。
