通过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%;width: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>

html5+js实现刮刮卡效果的更多相关文章

  1. 使用HTML5实现刮刮卡效果

    你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...

  2. Html5实现移动端、PC端 刮刮卡效果

    刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...

  3. Atitit .html5刮刮卡的gui实现总结

    Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel  ,这个十mask div.....posti ...

  4. HTML5 简单实现刮刮乐效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Android 自定义控件实现刮刮卡效果 真的就只是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...

  6. Android 自己定义控件实现刮刮卡效果 真的就仅仅是刮刮卡么

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...

  7. js实现刮刮卡抽奖

    刮刮卡抽奖是前端活动页常见的功能: 链接:图像擦除插件(下载及教程讲解)    推荐理由:无缝刮痕,兼容性好,上手简单   插件有些要修改的地方,打开图像擦除插件后可以看下方网友讨论,或者直接下载本博 ...

  8. qt qml 刮刮卡效果

    用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...

  9. 用BlendFunc实现舞台灯光和刮刮卡效果

    [转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...

  10. HTML5 Canvas实战之刮奖效果

    近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...

随机推荐

  1. ubuntu虚拟环境virtualenv中djanggo连接mysql

    在ubuntu服务器上安装MYSQLDB,执行:sudo apt-get install python-mysqldb, 若提示: ---------------------------------- ...

  2. maven入门

    1.1.项目构建 Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 项目构建过程包括 ...

  3. pod JONSKit.h MBProgress.h 找不到头文件，怎么办？

    这时你看项目pod部分,多了JSONKit库.好了,第三方库就这么神奇的加进来. 头文件路径 那试试看使用JONSKit.h,在ViewController.m里引用下.找不到头文件,怎么办?还没设置 ...

  4. PHP 用文件流方式展示图片

    public function index(){ $img = 'http://img.pf.loc/static/images/2016/05/24/21d98edf98bd6c30afe1c838 ...

  5. 转！！java泛型概念（泛型类，接口，方法）

    一. 泛型概念的提出(为什么需要泛型)? 首先,我们看下下面这段简短的代码: 1 public class GenericTest { 2 3 public static void main(Stri ...

  6. Request 接收参数乱码原理解析

    起因: 今天早上被同事问了一个问题:说接收到的参数是乱码,让我帮着解决一下. 实际情景: 同事负责的平台是Ext.js框架搭建的,web.config配置文件里配置了全局为“GB2312”编码: &l ...

  7. Machine Learning - 第3周（Logistic Regression、Regularization）

    Logistic regression is a method for classifying data into discrete outcomes. For example, we might u ...

  8. C# 给软件加注册码功能

    为自己写的程序加一个注册功能吧.生成的机器号是根据CPU和硬盘号来的,根据自己的需求改成是否是随机生成. 代码直接粘贴到新建类覆盖原代码就能直接用了. using System; using Syst ...

  9. 20145218 《Java程序设计》第10周学习总结

    20145218 <Java程序设计>第10周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 程序员所作的事情就是把数据发送到指定的位 ...

  10. 纯css代码写旋转动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...