刮刮卡

实现思路

用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>