Vue中刮奖逻辑

  methods: {
    drawArcByPoint (x, y) {
      this.context.beginPath();
      const getOffset = dom => {
        let left = 0;
        let top = 0;
        while (dom) {
          left += dom.offsetLeft;
          top += dom.offsetTop;
          dom = dom.offsetParent;
        }
        return { left, top };
      };
      const offset = getOffset(this.canvas);
      this.context.arc(x - offset.left, y - offset.top, 20, 0, Math.PI * 2);
      this.context.closePath();
      this.context.fillStyle = '#ff0000';
      this.context.fill();
      this.checkComplete();
    },
    // 判断是否完成刮奖 点数大于80%
    checkComplete () {
      const imgData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
      const pxData = imgData.data;// 获取字节数据
      const len = pxData.length; // 获取字节长度
      let count = 0; // 记录透明点的个数
      // 主要的思想是 一个像素由四个数据组成，每个数据分别是 rgba() 所以第四个数据 a 表示alpha透明度
      for (let i = 0; i < len; i += 4) {
        const alpha = pxData[i + 3]; // 获取每个像素的透明度
        if (alpha < 10) {
          // 透明度小于10
          count++;
        }
      }
      const percent = count / (len / 4);// 计算百分比
      // 如果百分比大于0.8 则表示成功
      if (percent >= 0.8) {
        // do something
      }
    },
    // 根据触摸点画圆
    drawArcTouchHandle (event) {
      event.preventDefault();
      const touch = event.touches[0];
      this.drawArcByPoint(touch.pageX, touch.pageY);
    }
  },
  mounted () {
    if (!this.scratched) {
      this.$nextTick(() => {
        this.canvas = this.$refs.canvas;
        this.context = this.canvas.getContext('2d');
        const scratchArea = this.$refs.scratchArea;
        
        // 涂层为色块
        // this.context.fillStyle = '#d1d1d1';
        // this.context.fillRect(0, 0, scratchArea.clientWidth, scratchArea.clientHeight);
        
        // 涂层为图片
        // const img = new Image();
        // img.src = 'http://f2.kkmh.com/game/190730/w5aonJKHz.png-w750';     
        // canvas与图片不在同一个域下，通过getImageData获取图片数据时会报错跨域，此处设置img.crossOrigin = ‘’可解决此问题，但是在很多iOS上不生效，且报错：Unable to get image data from canvas because the canvas has been tainted by cross-origin data. SecurityError: The operation is insecure.
        // img.crossOrigin = '';
        // img.onload = () => {
        //   this.context.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
        //   this.context.globalCompositeOperation = 'destination-out';
        //   // 鼠标按下 增加mousemove的事件监听
        //   this.canvas.addEventListener('touchstart', this.drawArcTouchHandle);
        //   this.canvas.addEventListener('touchmove', this.drawArcTouchHandle);
        // };
        
        // 下面方法可以兼容其他浏览器
        const xhr = new XMLHttpRequest();
        xhr.onload = () => {
          const url = URL.createObjectURL(xhr.response);
          const img = new Image();
          img.crossOrigin = '';
          img.onload = () => {
            // 此时你就可以使用canvas对img为所欲为了
            this.context.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
            this.context.globalCompositeOperation = 'destination-out';
            // 鼠标按下 增加mousemove的事件监听
            this.canvas.addEventListener('touchstart', this.drawArcTouchHandle);
            this.canvas.addEventListener('touchmove', this.drawArcTouchHandle);
            // 图片用完后记得释放内存
            URL.revokeObjectURL(url);
          };
          img.src = url;
        };
        xhr.open('GET', require('assets/img/card/pic_scratch_01.png'), true);
        xhr.responseType = 'blob';
        xhr.send();
      });
    }
  }