<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="./scratch.js"></script>

</head>

<body>

    <canvas id="down" width=300 height=100 style="position:absolute;left:10px; top:10px; border:1px solid #333;" ></canvas>

    <canvas id="up" width=300 height=100 style="position:absolute;left:10px; top:10px; border:1px solid #333"></canvas>

    <script>

         var options = {

             awards:['一等奖','二等奖','三等奖','特等奖','没中奖'],

             maskColor:"gray",

             textStyle:{

                 'size':'30',

                 'family':'Arial',

                 'align':'center',

                 'color':"orange"

             },

             radius:30

         }

         var scratch = new Scratch(options);

         scratch.init();

    </script>

</body>

</html>
(function (doc,win){
    var Scratch = function(options){
        this.options = options;
        this.up = doc.querySelector("#up");
        this.upCtx = this.up.getContext("2d");
        this.down = doc.querySelector("#down")
        this.downCtx = this.down.getContext("2d");

this.width = this.up.width;
        this.height = this.up.height;
    }

Scratch.prototype = {
            constructor: Scratch,
            init:function(){
                this.drawText();
                this.drawMask();
                this.addEvent();
            },
            drawText:function(){
                var ctx = this.downCtx;
                ctx.font = this.options.textStyle.size + "px " + this.options.textStyle.family;
                ctx.textAlign = this.options.textStyle.align;
                ctx.fillStyle = this.options.textStyle.color;
                ctx.textBaseline = "top";
                var random = parseInt(Math.random() * this.options.awards.length) || 0;
                this.award = this.options.awards[random];
                ctx.fillText(this.award,this.width/2,this.height/2 - this.options.textStyle.size/2);

},
            drawMask:function(){
                var ctx = this.upCtx;
                ctx.fillStyle = this.options.maskColor;
                ctx.fillRect(0,0,this.width,this.height);
                ctx.globalCompositeOperation = 'destination-out';
            },
            addEvent:function(){
                var _this = this;
                _this.up.addEventListener('mousedown',function(ev){
                    _this.up.addEventListener('mousemove',callback1 = function(ev){
                        var ctx = _this.upCtx;
                        var x = ev.clientX - _this.up.offsetLeft;
                        var y = ev.clientY - _this.up.offsetTop;
                        var radius = _this.options.radius;
                        ctx.beginPath();
                        var gradient = ctx.createRadialGradient(x, y, 0, x, y, options.radius);
                        gradient.addColorStop(0,"rgba(255, 255, 255, 0.3)");
                        gradient.addColorStop(1,"rgba(255, 255, 255, 0)");
                        ctx.fillStyle = gradient;
                        ctx.arc(x, y, radius, 0, Math.PI * 2, true);
                        ctx.fill();
                        ctx.closePath();

if(_this.result() > 0.8){
                            alert(_this.award);
                        }

},false)

doc.addEventListener('mouseup',callback2 = function(ev){
                        _this.up.removeEventListener('mousemove',callback1);
                        doc.removeEventListener('mouseup',callback2);
                    },false)
                },false)

},
            result:function(){
                //文字宽度
                var textWidth = this.options.textStyle.size * this.award.length;
                //文字高度
                var textHeight = this.options.textStyle.size;
                var transPixel = [];
                var imgData = this.upCtx.getImageData(this.width/2-textWidth/2,this.height/2-textHeight/2,textWidth,textHeight);
                var pixels = imgData.data;
                for(var i = 0; i < pixels.length; i += 4){
                    var a = pixels[i+3];
                    if(a < 128){
                        transPixel.push(a);
                    }
                }
                return transPixel.length / (pixels.length/4);
            }

};
    win.Scratch = Scratch;

})(document,window)

canvas 之刮刮卡的更多相关文章

  1. canvas 绘制刮刮卡

    思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...

  2. canvas实现刮刮卡效果

    canvas实现刮刮卡效果 实现步骤: 设置页面背景图,即刮刮卡底部图片 绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener  touchstart.tou ...

  3. qt qml 刮刮卡效果

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

  4. 网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践

    前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...

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

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

  6. 用c#开发微信 (16) 微活动 2 刮刮卡

    微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...

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

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

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

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

  9. Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View

    一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...

  10. Android刮刮卡自定义控件

    网上的都是自己绘制的或者图片,我的需求是可以随意的自定义底部和顶部的布局.所以自己重写一个,原理就是直接继承 View 来实现一个刮层,让这个刮层和图片以及文字不产生任何依赖,再结合 FrameLay ...

随机推荐

  1. Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用

    Grunt和Gulp构建工具在Visual Studio 2015中的高效的应用 Grunt和Gulp是Javascript世界里的用来做自动压缩.Typescript编译.代码质量lint工具.cs ...

  2. axure团队合作开发原型图

    谁是人画或其他原型图的头,但在基本制度的发展时,.我们分配一些人画的原型,其他部分干. 再画一个原型不再是一个人画,一起画,假设大家都各自画自己那一部分.最后再由一个人来整合的画.是非常麻烦. 咱平时 ...

  3. BIZTALK项目中WEB引用WEBSERVICES服务时候报错

    近期工作中须要完毕通过BIZTALK完毕调用WEBLOGIC公布的WebServices服务,环境搭建好后,打开VS开发工具新建一个BIZTALK项目,加入WEB引用将对方公布的地址拷贝上去,能够正常 ...

  4. 【转】UIAutomator定位Android控件的方法实践和建议(Appium姊妹篇)

    原文地址:http://blog.csdn.net/zhubaitian/article/details/39777951 在本人之前的一篇文章<<Appium基于安卓的各种FindEle ...

  5. 【转】Appium基于安卓的各种FindElement的控件定位方法实践

    原文地址:http://blog.csdn.net/zhubaitian/article/details/39754041#t11 AppiumDriver的各种findElement方法的尝试,尝试 ...

  6. C---通过指针访问数组

    C语言规定:如果指针变量P已指向数组中的一个元素,则P+1指向同一数组中的下一个元素. 引入指针变量后,就可以用俩种方法来访问数组元素了. 如果p的初值为&a[0],则: P+i 和a+i 就 ...

  7. Cocos2d-x 3.0 编译出错 解决 error: expected &#39;;&#39; at end of member declaration

    近期把项目移植到cocos2d-x 3.0,在整Android编译环境的时候,出现一大堆的编译出错,都是类似"error: expected ';' at end of member dec ...

  8. asp.net mvc源码分析-DefaultModelBinder 自定义的普通数据类型的绑定和验证

    原文:asp.net mvc源码分析-DefaultModelBinder 自定义的普通数据类型的绑定和验证 在前面的文章中我们曾经涉及到ControllerActionInvoker类GetPara ...

  9. mongodb操作：利用javaScript封装db.collection.find()后可调用函数源码解读

    { "_mongo" : connection to YOURIP:27017{ SSL: { sslSupport: false, sslPEMKeyFile: "&q ...

  10. php 解析xml 的四种方法

    XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...