刮刮卡

实现思路

用canvas画三层，
最下面的一层为奖品图片
中间一层为灰色的刮卡层
最上面一层是用户的滑动范围

利用canvas的destination-out 让相加的部分变透明
//只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过

Canvas里的globalCompositeOperation

---

js代码

class RafflePages extends BaseClass {    constructor(str) {        super(str);    }    init() {        super.init();        this.ctx = '';        this.canvas = '';        this.img = '';        this.isused = 0;    }    hide(){        super.hide();        this.$dom.find('#guaguakas').hide();    }    show(flag) {        super.show();         if(flag){            this.$dom.find('#guaguakas').show();          this.showCard();            this.isused = 0;        }        // this.num = Math.random();//      this.randomPage();        //   this.$dom.find('.reset').on('tap',()=>{        //     this.reset();        //   })    }    showCard() {        this.img = new Image();        this.canvas = document.querySelector('#guaguakas');//      this.canvas.style.backgroundColor = 'transparent';//      this.canvas.style.position = 'absolute';        var w = this.$dom.find('.intergation').innerWidth()+1;        var h = this.$dom.find('.intergation').innerHeight()+1;        this.canvas.width = w;        this.canvas.height = h;        var self = this;        this.img.addEventListener('load', function (e) {            var w = self.img.width / 1.75,                h = self.img.height / 1.75;            var mousedown = false;            function layer(ctx) {                ctx.drawImage(self.img, 0, 0, self.canvas.width, self.canvas.height)            }            function eventDown(e) {                e.preventDefault();                mousedown = true;            }            function eventUp(e) {                e.preventDefault();                mousedown = false;                self.autoClear();            }            function eventMove(e) {                e.preventDefault();                if (mousedown) {                    if (e.changedTouches) {                        e = e.changedTouches[e.changedTouches.length - 1];                    }                    var offsetX = $('#guaguakas').offset().left,                        offsetY = $('#guaguakas').offset().top;                    var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,                        y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;                    self.ctx.beginPath();                    self.ctx.arc(x, y, 15, 0, Math.PI * 2);                    self.ctx.fill();                }            }//          self.canvas.width = self.$dom.find('.scratchBg').width() * 0.9;//          self.canvas.height = self.$dom.find('.scratchBg').height() * 0.8;            self.ctx = self.canvas.getContext('2d');            self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height);            self.ctx.fillStyle = '#f0f8eb';            self.ctx.fillRect(0, 0, w, h);            layer(self.ctx);            //destination-out 只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过            self.ctx.globalCompositeOperation = 'destination-out';            self.canvas.addEventListener('touchstart', eventDown);            self.canvas.addEventListener('touchend', eventUp);            self.canvas.addEventListener('touchmove', eventMove);        });        if(localStorage.getItem('share')){                self.img.src = 'resources/img/intergation6.png';        }else{                self.img.src = 'resources/img/intergation7.png';        }//      self.img.src = 'resources/img/intergation6.png';    }    autoClear() {        var self = this;        if(self.isused==0){                self.showPage();                self.isused=1;            }        //当剩余未刮开的小于X%时自动刮开余下的部分        var data = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;        for (var i = 0, j = 0; i < data.length; i += 4) {            if (data[i] && data[i + 1] && data[i + 2] && data[i + 3]) {                j++;            }        }        if (j <= this.canvas.width * this.canvas.height * 0.4) {            self.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);//          setTimeout(function () {//              self.showPage();//          }, 500);            self.$dom.find('#guaguakas').hide();            return;        }    }    reset() {        this.ctx.globalCompositeOperation = 'source-over';        this.ctx.drawImage(this.img, 0, 0, this.canvas.width, this.canvas.height);        this.ctx.globalCompositeOperation = 'destination-out';    }    randomPage() {//      var self = this;//      $.ajax({//          url: `${Config.server}/lottery/${Config.visitor.openId}`,//          type: 'GET',//          success: function (res) {//              if (res.code != 0) {//                  return;//              }//              if (res.data.status == 0) {//                  self.$dom.find('.unluckContainer').show();//              } else if (res.data.status == 1) {//                  self.$dom.find('.luckContainer').show();//              }//              // //console.log(res.data);//0未中奖，1中奖，//              Config.visitor.isLucky = res.data.status;//          }//      })    }    showPage() {        var self = this;//      this.$dom.find('#guaguakas').hide();        $.ajax({            url: config.server + `/lottery/${currentMacket.drawnInfo.id}/${config.userInfo.openid}`,            type: 'PUT',            data: {id:currentMacket.drawnInfo.id,openid:config.userInfo.openid},            success: function(res){                self.isused=1;            },            error: function(error){            }//error结束        });    }}module.exports = RafflePages;

html

<canvas id="guaguakas" class="canvas2" ></canvas>