zoukankan      html  css  js  c++  java
  • 刮刮卡效果

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

  • 相关阅读:
    eclipse如何设置多个字符的智能提示
    19.面向对象的三大特征 之封装
    18代码块
    成员变量和局部变量的区别
    类与对象
    Python压缩脚本编辑
    字符串内容
    参考
    序列
    元组
  • 原文地址:https://www.cnblogs.com/linchaoqun/p/4763093.html
Copyright © 2011-2022 走看看