码迷,mamicode.com
首页 > 其他好文 > 详细

刮刮卡效果

时间:2015-08-27 14:56:37      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

利用两个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

刮刮卡效果

标签:

原文地址:http://www.cnblogs.com/linchaoqun/p/4763093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!