canvas 之刮刮卡

<!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 之刮刮卡的更多相关文章

canvas 绘制刮刮卡
思路=> 用div来展示刮奖结果,用canvas绘制刮奖前展示的图片或者文字:将canvas叠在div上方,刮奖是只需要操作canvas配合touch事件即可简单完成. canvas刮奖可以用g ...
canvas实现刮刮卡效果
canvas实现刮刮卡效果实现步骤: 设置页面背景图,即刮刮卡底部图片绘制canvas 刮刮卡顶部图片drawImage 绑定事件 addEventListener touchstart.tou ...
qt qml 刮刮卡效果
用canvas+mouseArea实现的刮刮卡效果. 表层是一层色彩,用手指划开,可看到下面的文字Lisence: MIT, 请保留本文档说明Author: surfsky.cnblogs.com 2 ...
网页闯关游戏(riddle webgame)--H5刮刮卡的原理和实践
前言: 之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识. 对于刮刮卡, 想必大家都很熟悉, 也很喜 ...
Html5实现移动端、PC端刮刮卡效果
刚从南方回来就分了一个刮刮卡效果的页面,特么的我在烦恼怎么用H5去实现这个效果呢,好不容易写出来了,产品居然说:“既然你可以写出来这个效果那当然好了,开始我只是打算让你实现点击就出现呢!”… … 尼玛 ...
用c#开发微信 (16) 微活动 2 刮刮卡
微信营销是一种新型的营销模式,由于微信更重视用户之间的互动,故而这种营销推广不不能盲目地套用微博营销的单纯大量广告推送方式.这种方式在微信营销中的效果非常差,会令用户反感,继而取消去企业或商家的微信公 ...
Atitit .html5刮刮卡的gui实现总结
Atitit .html5刮刮卡的gui实现总结 #----两个案例canvas或者wScratchPad-1.4.4 1 #----1.添加panel ,这个十mask div.....posti ...
使用HTML5实现刮刮卡效果
你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5 ...
Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View
一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...
Android刮刮卡自定义控件
网上的都是自己绘制的或者图片,我的需求是可以随意的自定义底部和顶部的布局.所以自己重写一个,原理就是直接继承 View 来实现一个刮层,让这个刮层和图片以及文字不产生任何依赖,再结合 FrameLay ...

随机推荐

[Android] Upload package to device fails #2720
错误描述: 解决办法: 来源:https://facebook.github.io/react-native/docs/android-setup.html
[mysql]刷新windows恢复后mysql和"Access denied for user'root'@'IP'"处理问题
mysql数据库软件实际上是绿色的,重装系统后能够继续使用. 1.重装系统保留原有的后mysql安装文件夹,数据文件夹. 2.制作用于启动一个批处理文件mysql:[run.bat]的文件存储在mys ...
C#操作Excel初探
近期一段时间正好在做winform导出Excel报表的问题,学习了一下C#操作Excel的一些方法(如:向Excel中插入图片:删除Excel指定sheet中的某行或某列,在Excel指定的单 ...
再议 js 数字格式之正则表达式
原文:再议 js 数字格式之正则表达式前面我们提到到了js的数字格式<浅谈 js 数字格式类型>,之前的<js 正则练习之语法高亮>里也提到了优化数字匹配的正则.不过最近落叶 ...
Android 平台 HTTP网速測试案例 API 分析
作者 : 万境绝尘转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/25996817 工信部规定的网速測试标准 : 除普通网页測速 ...
android KK版本号，如何更改蓝牙设备类型
mediatek/external/bluetooth/bt_cust/bt_cust_table.h { .name = "ClassOfDevice", ...
DevExpress gridview下拉框的再次研究
原文:DevExpress gridview下拉框的再次研究前几天写了一篇关于研究DevExpress gridview下拉框的随笔(DevExpress gridview下拉框repository ...
《MonkeyRunner原理剖析》第九章－MonkeyImage实现原理 - 第一节 - 关键类作用及关系
MonkeyRunner框架暴露了几个类的大量的API出去给用户编写脚本时候使用,其中最主要的三个就是: MonkeyDevice目标设备操作类,HierarchyViewer窗口界面对象操作类以及M ...
FlexiGrid使用手册
FlexiGrid使用手册一.概览 Flexigrid是一个基于jQuery开发的Grid,与 Ext Gird类似.Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换. 它的 ...
Ubuntu Ruby On Rails安装和配置
在这篇文章中ubuntu通过rvm安装ruby和rails.步借鉴了官方网站和网上信息,这里给大家分享. 1. 安装mapapis公钥: gpg --keyserver hkp://keys.gnup ...

canvas 之刮刮卡

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

随机推荐

热门专题