刮刮卡效果

利用两个canvas 叠加，从而实现刮刮卡效果。

<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;
}

touchy.js是用于移动端触摸事件的封装插件。（https://github.com/HotStudio/touchy）

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();
    },

其中 ctxUp.globalCompositeOperation = "destination-out";是关键代码。在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

效果请查看：http://www.linchaoqun.com/html/canvas/scrub.jsp

源代码：https://github.com/ShuangMuChengLi/Blog