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%;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实现刮刮卡效果的更多相关文章

使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
Html5实现移动端、PC端刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
Atitit .html5刮刮卡的gui实现总结
Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel ,这个十mask div.....posti ...
HTML5 简单实现刮刮乐效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Android 自定义控件实现刮刮卡效果真的就只是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 很久以前也过一个html5的刮刮卡 ...
Android 自己定义控件实现刮刮卡效果真的就仅仅是刮刮卡么
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40162163 , 本文出自:[张鸿洋的博客] 非常久以前也过一个html5的刮刮 ...
js实现刮刮卡抽奖
刮刮卡抽奖是前端活动页常见的功能: 链接:图像擦除插件(下载及教程讲解) 推荐理由:无缝刮痕,兼容性好,上手简单插件有些要修改的地方,打开图像擦除插件后可以看下方网友讨论,或者直接下载本博 ...
qt qml 刮刮卡效果
用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...
用BlendFunc实现舞台灯光和刮刮卡效果
[转]http://code.lovemiao.com/?p=136#more-136 之前写过一篇<不规则形状按钮的点击判定>,利用了CCRenderTexture创建一块画布,可以在上 ...
HTML5 Canvas实战之刮奖效果
近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理原理很简单,就是在刮奖区添加两个canvas, ...

随机推荐

JavaSE复习_10 多线程复习
△wait()和sleep()的区别: 1.wait():没有等待时间,而sleep()需要有等待时间作为参数. 2.在同步中对于CPU的执行权和锁的处理不同: wait()会释放执行权和锁. ...
PPPOE协议
PPPOE协议 PPPOE的全称为PPP Over Ethernet,用于实现PPP在以太网上的传输.它要求通信双方是点到点的关系,不适于广播型的以太网和一些多点访问型网络. 一.PPPOE的作用将 ...
MyBatis——解决字段名与实体类属性名不相同的冲突
原文:http://www.cnblogs.com/xdp-gacl/p/4264425.html 在平时的开发中,我们表中的字段名和表对应实体类的属性名称不一定都是完全相同的,下面来演示一下这种情况 ...
如何设置DIV水平、垂直居中
一.水平居中需要设置两点: 1 设置DIV 的width属性即宽度. 2 设置div的margin-left和margin-right属性即可代码: <div style="w ...
Java 两个变量交换值
package test; public class Test { public static void main(String[] args) { int a, b; ...
chrome web开发工具
顾名思义Chrome开发工具就是一个工具,它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面,也可以通过这个工具调试和测试Web页面或Web应用程序.有了这个工具,你可以做很多有趣的事情: ...
eclipse 下的 merge 是如何实现的
1 我从eclipse里面新建一个workspace2 新建一个分支3 再新建另外一个分支4 回到原分支, 修改某一行,比如a.txt的85行5 提交git add commit6 切换到新分支7 修 ...
Deep Learning in Bioinformatics
最近在学tensorflow,深度学习的开源工具,很好奇在生信领域深度学习都能做些什么东西. 镇楼的综述:Deep Learning in Bioinformatics 几篇文章读读看: Deep l ...
当CanTK遇到PhoneGap
有朋友问能不能在CanTK和AppBuilder开发的APP里发送UDP数据,HTML5里只能用HTTPS/HTTP/WebSocket几种通讯方式,要使用UDP需要通过phonegap打包成APK等 ...
理论与实践中的 C# 内存模型，第 2 部分
转载自:https://msdn.microsoft.com/zh-cn/magazine/jj883956.aspx 这是介绍 C# 内存模型的系列文章的第二篇(共两篇). 正如在 MSDN 杂志十 ...

html5+js实现刮刮卡效果

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

随机推荐

热门专题