uni-app使用Canvas实现刮刮乐效果

uni-app使用canvas实现刮刮乐效果

在uni-app中使用canvas比较简单，官方参考文档写的非常详细。但是uni-app使用canvas真的有很多坑，所有单独记录下自己的爬坑之旅。

draw()方法

uni-app设计的draw()方法绘制canvas图像真的是非常的坑，绘制同一幅图像只能使用一次draw()方法，因此要实现擦除效果必须每次都擦除完然后再清楚原有的图像重新绘制新的图像。这样一遍一遍的循环才能实现擦除。

每次按下的时候都绘制一个新的矩形区域

监听canvas区域触摸开始事件，这个时候重新配置canvas参数。但是这个时候不能调用draw()方法。一旦调用，矩形区域绘制完毕，将不可擦除。【这点真的是非常坑】

start:function(){  //触摸开始
            this.ctx = uni.createCanvasContext('cvs');
            this.ctx.setStrokeStyle('#00ff00');
            this.ctx.setFillStyle('#f60');
            this.ctx.fillRect(0,0,300,150);
            //this.ctx.draw()
        },

通过触摸移动来清除绘制

清除绘制直接调用this.ctx.clearRect(x,y,10,10);其中x,y是起点坐标。
但是触摸移动会一致调用touchmove事件，因此这里也不能调用draw()方法。
这时需要记录下触摸的轨迹，即将x,y存储起来，用于标记擦除区域。

触摸结束绘制canvas

再触摸结束的时候调用draw()方法完成整个矩形区域的绘制。

程序如下

start:function(){
            this.ctx = uni.createCanvasContext('cvs');
            this.ctx.setStrokeStyle('#00ff00');
            this.ctx.setFillStyle('#f60');
            this.ctx.fillRect(0,0,300,150);
            //this.ctx.draw()
        },
        move:function(e){
            var x1 = e.touches[0].x;
            var y1 = e.touches[0].y;
            this.x.push(x1);
            this.y.push(y1);
        },
        end:function(){
            var x = [...this.x];
            var y = [...this.y]
            var xlen = this.x.length;
            var ylen = this.y.length;
            for(let i = 0; i<xlen; i++){
                for(let j = 0; j<ylen; j++){
                    this.ctx.clearRect(x[j],y[j],10,10);
                }
            }
            this.ctx.draw();
        }

思路总结

简单的说整个过程就是每次按下的时候都绘制一个矩形区域，但是不调用draw()完成绘制，再触摸移动端额时候将移动轨迹记录下来，再将轨迹转换为要擦除的区域。最后在触摸结束的时候在调用draw()完成绘制。也就是第一次只差A区域，第二次重新绘制同时插除A区域+B区域，以此类推第三次擦除A+B+C区域。知道全部擦除或放弃擦除。
当然以上只是个人一些想法和实现的思路。