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, ...

随机推荐

JSP连接数据库的两种方式：Jdbc-Odbc桥和Jdbc直连（转）
学JSP的同学都要知道怎么连数据库,网上的示例各有各的做法,弄得都不知道用谁的好.其实方法千变万化,本质上就两种:Jdbc-Odbc桥和Jdbc直连. 下面先以MySQL为例说说这两种方式各是怎么连的 ...
Android PopupWindows使用
源码测试示例: package com.example.popupwindown; import android.os.Bundle; import android.app.Activity; imp ...
Java中值传递的实质，形式参数与实际参数。引用传递。
值传递 package ch5; /** * Created by Jiqing on 2016/11/9. */ public class Transfer { public static void ...
【夯实Mysql基础】记一次mysql语句的优化过程！
1. [事件起因] 今天在做项目的时候,发现提供给客户端的接口时间很慢,达到了2秒多,我第一时间,抓了接口,看了运行的sql,发现就是 2个sql慢,分别占了1秒多. 一个sql是链接了5个表同 ...
Android星星评分控件RatingBar的使用
在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...
about shell
摘抄 cat 等 cat主要有三大功能:1.一次显示整个文件.$ cat filename2.从键盘创建一个文件.$ cat > filename只能创建新文件,不能编辑已有文件.3.将 ...
青云的机房组网方案（简单＋普通＋困难）(虚树＋树形DP＋容斥)
题目链接 1.对于简单的版本n<=500, ai<=50 直接暴力枚举两个点x,y,dfs求x与y的距离. 2.对于普通难度n<=10000,ai<=500 普通难度解法挺多 ...
python 图实现
#coding:utf-8 __author__ = 'similarface' class Graph: def __init__(self,label,extra=None): #节点是类实例 s ...
php 注入
SELECT * FROM `users` WHERE name = 'a\'b\'d' LIMIT 0 , 30 这个是有结果的,运行正确的,和一般想的不一样,单引号里面可以套单引号,只要里面的单引 ...
销售 >> 当今社会生产力最大的源泉为 >>自助服务与推销员随之消失
销售可能是变化最大的企业职能.比如,经济学家喜欢提出陷阱问题“什么概念或者想法成为当今社会生产力最大的源泉?” 大多数人回答计算机, 正确的回答是自助服务与推销员随之消失 ...

html5+js实现刮刮卡效果

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

随机推荐

热门专题