刮刮卡效果

<canvas id="downCanvas"></canvas>
<canvas id="upCanvas"></canvas>

.container-page .main .article section #upCanvas {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #eaeaea;
  border-radius: 4px;
}

this.canvas.up.o.bind(‘touchy-drag‘, oThis.handleTouchyDrag);

handleTouchyDrag : function (event, phase, $target, data) {
        
        switch (phase) {
            case ‘start‘:
                break;
            case ‘move‘:
                oScrubCase.fnFill(data.movePoint.x, data.movePoint.y);
                break;
            case ‘end‘:
                
        }
    },
fnFill : function(x , y){
        var ctxUp = oScrubCase.canvas.up.ctx;
        var ctxO = oScrubCase.canvas.up.o;
        var sPointY = y - ctxO.offset().top;
        var sPointX = x - ctxO.offset().left;
        ctxUp.globalCompositeOperation = "destination-out";
        ctxUp.beginPath();
        var radgrad2 = ctxUp.createRadialGradient(sPointX, sPointY , 0, sPointX, sPointY, 30);
        radgrad2.addColorStop(0, ‘rgba(255, 255, 255, 1)‘);
        radgrad2.addColorStop(1, ‘rgba(255, 255, 255, 1)‘);
        ctxUp.fillStyle = radgrad2;
        ctxUp.arc(sPointX, sPointY, 30, 0, Math.PI * 2, true);
                    
        ctxUp.fill();
    },