互动游戏-刮刮卡

分析

刮刮卡覆盖在奖品上的遮盖层, 可以是灰色背景也可以是图片, 通过手指滑动消除遮罩层

实现

使用Canvas实现最好

<canvas 
  onTouchStart={this.handleStart}
  onTouchMove={this.handleMove}
  onTouchEnd={this.handleEnd}
>
</canvas>

使用图片遮盖层

const img = new Image();
img.src = this.props.coverImg
img.onload = () => {
    this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
}

使用灰色背景遮盖层

this.ctx.fillStyle = this.props.coverColor;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

监听手指移动路径, 通过arc 渲染白色小球当小球大且连贯时,即可实现

handleMove = (e) => {
    const canvasPos = this.canvas.getBoundingClientRect();
    const pageScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const pageScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    const mouseX = e.pageX || e.targetTouches[0].pageX - canvasPos.left - pageScrollLeft;
    const mouseY = e.pageY || e.targetTouches[0].pageY - canvasPos.top - pageScrollTop;

    this.ctx.beginPath();
    this.ctx.fillStyle = '#FFFFFF';
    this.ctx.globalCompositeOperation = "destination-out";
    this.ctx.arc(mouseX, mouseY, this.src, 0, 2 * Math.PI);
    this.ctx.fill();
}

handleEnd = () => {
    const pixels = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
    let transPixels = [];
    pixels.data.map((item, i) => {
        let pixel = pixels.data[i + 3];
        if (pixel === 0) {
            transPixels.push(pixel);
        }
    })
    if (transPixels.length / pixels.data.length > this.props.ratio) {
        console.log('end')
    }
}