• html5+js实现刮刮卡效果


    通过Canvas实现的可刮涂层效果.

    修改img.src时涂层也会自动适应新图片的尺寸.

    修改layer函数可更改涂层样式.

    涂层:

    可刮效果:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>F5</title>
        <style>
        html,body{margin:0;padding:0;height:100%;100%;-webkit-overflow-touch:none;}
        </style>
    </head>
    <body>
    
    
    
    <script>
    ;(function(){
        var isTouch = 'ontouchstart' in window,
            events = {
                start : isTouch ? 'touchstart' : 'mousedown',
                move : isTouch ? 'touchmove' : 'mousemove',
                end : isTouch ? 'touchend' : 'mouseup'
            };
        var ScratchCard = function (params) {
            if( !(this instanceof ScratchCard) ) {
                return new ScratchCard(params);
            };
            this._init(params);
        };
        ScratchCard.prototype = {
            constructor : ScratchCard ,
            _init : function (params) {
                var _this = this,
                    ret = _this._createCanvas(params);
                _this.canvas = ret.canvas;
                _this.ctx = ret.ctx;
    
                _this.pos = _this._getPos(_this.canvas);
                _this.canvas.style.backgroundImage = 'url(' + params.url + ')';
                _this.canvas.style.backgroundRepeat = 'no-repeat';
                _this.canvas.style.backgroundSize = "100% 100%";
    
                //圆的半径
                _this.radius = params.radius || 10;
                //区域宽高
                _this.width = params.width;
                _this.height = params.height;
                //事件监听
                _this._listen();
            },
            _createCanvas : function (params) {
                var canvas = document.createElement('canvas'),
                    ctx = canvas.getContext('2d');
                canvas.width = params.width;
                canvas.height = params.height;
                params.dom.appendChild(canvas);
                if(params.type == 'image'){
                    var img = new Image();
                    img.src = params.src;
                    img.onload = function () {
                        ctx.drawImage(img,0,0, document.documentElement.clientWidth, document.documentElement.clientHeight);
                    }
                }else if(params.type == 'color'){
                    ctx.fillStyle = params.color;
                    ctx.fillRect(0,0,params.width,params.height);
                }
                return {
                    canvas : canvas,
                    ctx : ctx
                }
            },
            _listen : function () {
                var _this = this;
                _this.enableMove = false;
                _this.canvas.addEventListener(events.start,function(e){
                    _this._start(e);
                },false);
                _this.canvas.addEventListener(events.move,function(e){
                    _this._move(e);
                },false);
                document.body.addEventListener(events.end,function(e){
                    _this._end(e);
                },false);
            },
            _start : function (e) {
                var _this = this,x,y;
                _this.enableMove = true;
                e = isTouch ? e.touches[0] : e;
                x = e.pageX;
                y = e.pageY;
                _this._clear(x,y);
            },
            _move : function (e) {
                var _this = this,x,y;
                e.preventDefault();
                e = isTouch ? e.touches[0] : e;
                x = e.pageX;
                y = e.pageY;
                if(_this.enableMove){
                    _this._clear(x,y);
                }
            },
            _end : function (e) {
                var _this = this;
                _this.enableMove = false;
                _this.ctx.closePath();
                var data = _this.ctx.getImageData(0,0,_this.width,_this.height).data;
                for(var i=0,j=0;i<data.length;i+=4){
                    if(data[i] && data[i+1] && data[i+2] && data[i+3]){
                        j++;
                    }
                }
                if(j<=_this.width*_this.height*0.4){
                    _this.ctx.clearRect(0, 0, _this.width, _this.height);
                    _this._href('http://www.baidu.com');
                }
            },
            _finish : function () {
                alert('over');
            },
            _clear : function (x,y) {
                var _this = this, ctx = _this.ctx;
                x = x - _this.pos.left;
                y = y - _this.pos.top;
    
                ctx.fillStyle = '#0f0';
                ctx.globalCompositeOperation = 'destination-out';
                ctx.beginPath();
                ctx.moveTo(x,y);
                ctx.arc(x,y,_this.radius,0,Math.PI*2,false);
                ctx.fill();
            },
            _getPos : function (obj) {
                var _this= this;
                return  obj.offsetParent ?
                        (function(){
                            var ret = _this._getPos(obj.offsetParent);
                            return {
                                left : obj.offsetLeft + ret.left,
                                top : obj.offsetTop + ret.top
                            }
                        })() :
                        {
                            left : obj.offsetLeft,
                            top : obj.offsetTop
                        };
            },
            _href : function(href, waitTime){
                var timeHref = null;
                var waitTime = waitTime || 3000;
                clearTimeout(timeHref);
                timeHref = setTimeout(function(){
                    window.location.href = href;
                }, waitTime);
            }
        };
    
        window.ScratchCard = ScratchCard;
    })();
    
    
    /*
        参数
        dom                      dom节点
        width                    宽度
        height                   高度
        radius                   涂改大小
        type                     类型/图片或者颜色
        src                      图片——————遮罩
        color                    颜色——————遮罩
        url                      刮出来的图片
    */
    //自定义图片
    ScratchCard({
        dom : document.body,
        width : document.documentElement.clientWidth,
        height : document.documentElement.clientHeight,
        radius : 20,
        type : 'image',
        src : '1.jpg',
        url: '2.jpg'
    });
    
    //自定义颜色
    ScratchCard({
        dom : document.body,
        width : document.documentElement.clientWidth,
        height : 450,
        radius : 40,
        type : 'color',
        color : '#ddd',
        url: 'http://h.hiphotos.baidu.com/image/w%3D1366%3Bcrop%3D0%2C0%2C1366%2C768/sign=3a6cd8ad123853438ccf8322a5258b1d/63d0f703918fa0ec07bc4fcc249759ee3c6ddbf3.jpg'
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    Hibernate: Encountered a duplicated sql alias [] during auto-discovery of a native-sq
    “Uncaught TypeError: string is not a function”
    Jquery Ajax 返回数据类型变成document
    浏览器URL编码
    SQL Server 多条查询结果组合
    (转)No row with the given identifier exists问题的解决
    观nginx与lvs负载均衡的较量
    Nginx启动、关闭、重新加载脚本
    数据挖掘-分词入门
    HBase 专题技术收录
  • 原文地址:https://www.cnblogs.com/ygcool/p/5395306.html
走看看 - 开发者的网上家园