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

随机推荐

Android 四种简单的动画（淡入淡出、旋转、移动、缩放效果）
最近在Android开发当中,用到的动画效果. public void onClick(View arg0) { // TODO 自动生成的方法存根 switch (arg0.getId()) { c ...
【Android界面实现】FragmentPagerAdapter与FragmentStatePagerAdapter使用详解与区别
转载请注明出处: http://blog.csdn.net/zhaokaiqiang1992 FragmentPagerAdapter是android-support-v4支持包里面出现的一个新的适配 ...
在Spring Data JPA 中使用Update Query更新实体类
对于 Spring Data JPA 使用的时间不长,只有两年时间.但是踩过坑的却不少. 使用下列代码 @Modifying @Query("update User u set u.firs ...
OpenGL的gluLookAt观察变换函数详解
void gluLookAt(GLdouble eyex, GLdouble eyey, GLdouble eyez, GLdouble center ...
python操作mongodb之基础操作
#coding:utf-8 __author__ = 'hdfs' import pymongo from pymongo import MongoClient client = MongoClien ...
dom jaxp详解
转自 http://blog.csdn.net/java958199586/article/details/7277904 一.XML解析技术概述 1.XML解析方式分为两种:dom和sax (1)d ...
腾讯云从零部署nodejs站点
版权声明:本文由袁飞翔原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/176 来源:腾云阁 https://www.qclo ...
c语言数据结构：递归的替代-------回溯算法
1.要理解回溯就必须清楚递归的定义和过程. 递归算法的非递归形式可采用回溯算法.主要考虑的问题在于: 怎样算完整的一轮操作. 执行的操作过程中怎样保存当前的状态以确保以后回溯访问. 怎样返回至上一次未 ...
HTTP Content-Type的作用
在用java的 AsyncHttpClient与服务器通信时,忘记设置了 Content-Type的值,开始以为没有问题,使用默认的值就行后面出现了问题.查资料发现,Content-Type是用在M ...
字符串(string)转json
第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...

html5+js实现刮刮卡效果

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

随机推荐

热门专题