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

随机推荐

[CSS] vertical-align
原文地址: http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B ...
如何设置DIV水平、垂直居中
一.水平居中需要设置两点: 1 设置DIV 的width属性即宽度. 2 设置div的margin-left和margin-right属性即可代码: <div style="w ...
Windows不重启就使环境变量修改生效
以修改环境变量“PATH”为例,修改完成后,进入DOS命令提示符,输入:set PATH=C: ,关闭DOS窗口.再次打开DOS窗口,输入:echo %PATH% ,可以发现“我的电脑”->“属 ...
jsp页面直接从地址栏中获取参数的方法
function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&am ...
ios 企业证书 ipa 重新签名发布
提示:暂时不能用了,企业证书滥用 ios 企业证书 ipa 重新签名发布 1. 应用场景当前有一个未用企业证书签名的 ipa 文件,默认是不可以直接安装到设备上的:我们需要用企业版证书签名: 当前 ...
初接触eclipse和前后端调试问题待续
1.eclipse得连上服务器(tomcat).有JDK,才能跑起来.跑起来之后在本地localhost的行为eclipse的控制台上就可以看到,同样eclipse上对代码有所改动,浏览器上的loca ...
本地化Model Factory
即让其生成中文的测试数据先简单介绍Model Factory两个常用方法: 进入tinker页面生成测试数据: Factory(User::class,10)->make():make()方法 ...
selenium+python笔记1
#!/usr/bin/env python # -*- coding: utf-8 -*- """@desc: 讲讲web项目中常用的方法属性 webdriver 提供了 ...
sublime text修改TAB缩进为2个空格
打开sublime后在倒数第二项 preference---->Settings-user: 然后输入 "tab_size": 2, "translate_tabs ...
androidStudio中如何加载字体资源?
在android中字体的格式总是不能尽善尽美的显示出来 , 于是要求我们使用一些有美感的字体,加载的方式(就像HTML的字体一样),我们需要通过加载字体的方式来使用android中不曾提供的字体; ...

html5+js实现刮刮卡效果

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

随机推荐

热门专题