javascript+canvas实现刮刮卡抽奖效果


Posted in Javascript onJuly 29, 2015

运用canvas做的简单刮刮卡效果,每次刷新可重新测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 *{ margin:0; padding:0;} 
 
.cjbox{ margin:100px; height:80px; width:200px; background:#FFF; position:relative;}
#canvas{position:absolute; left:0px; top:0px;z-index:99;}
.sjmes{ position:absolute; left:0px; top:0px; height:80px; width:200px; text-align:center; font-size:40px; line-height:80px; z-index:9;}
</style>
<title>demo1</title>
</head>
<body> 
 
<div style="position:relative; margin:20px 100px; background:#0CF; height:400px; width:500px; margin:0 auto;">
  <div>刮刮卡简单抽奖</div>
  <div class="cjbox">
    <div class="sjmes" id="sjmes"></div>
    <canvas width=200 height=80 id="canvas"></canvas> 
  </div>
</div> 
 
</body>
<script type="text/javascript">
//init 
var cjcon=["一等奖","二等奖","三等奖","谢谢参与"];//奖项设置
var cjper=[3,10,20,100];//奖项率,次数
/*
 * sjmes
 * @Author 透笔度(1530341234@qq.com)          
 * @param {cjcon}   所有奖项   
 */
var percjcon=[];
for(var i=0;i<cjper.length;i++){
  peic(cjper[i],i);
};
function peic(len,ind){
  for(var i=0;i<len;i++){
    percjcon.push(cjcon[ind]);
  }; 
};
var sjmes = document.getElementById("sjmes");
var numrandom=Math.floor(Math.random()*percjcon.length);
sjmes.innerHTML=percjcon[numrandom];
 
var opacityb=0.5;//透明百分比,参考值,什么程度出现提示
var backcolorb="#ffaaaa";
var numl=200*80;//总像素个数
var nump;//出现backcolorb的个数
var opacitya;//透明百分比实际值
 
var canvas = document.getElementById("canvas"); //获取canvas  
var context = canvas.getContext('2d'); //canvas追加2d画图
var flag = 0; //标志,判断是按下后移动还是未按下移动 重要
var penwidth=20; //画笔宽度
context.fillStyle="#faa"; //填充的颜色
context.fillRect(0,0,200,80); //填充颜色 x y坐标 宽 高
 
canvas.addEventListener('mousemove', onMouseMove, false); //鼠标移动事件 
canvas.addEventListener('mousedown', onMouseDown, false); //鼠标按下事件 
canvas.addEventListener('mouseup', onMouseUp, false); //鼠标抬起事件 
var movex=-1;
var movey=-1;
var imgData;//imagedada容器
var rgbabox=[];//存放读取后的rgba数据;
function onMouseMove(evt) {
  if (flag == 1) { 
    movex=evt.layerX;
    movey=evt.layerY;    
    context.fillStyle="#FF0000";
    context.beginPath();
    context.globalCompositeOperation="destination-out";
    context.arc(movex,movey,penwidth,0,Math.PI*2,true); //Math.PI*2是JS计算方法,是圆    
    context.closePath();
    context.fill();
  } 
} 
function onMouseDown(evt) { 
 flag = 1; //标志按下
} 
function onMouseUp(evt) { 
  flag = 0;
  //读取像素数据
  imgData=context.getImageData(0,0,200,80);//获取当前画布数据
  //imgData.data.length 获取图片数据总长度,没4个为一组存放rgba
  for(var i=0; i<imgData.data.length;i+=4){
    var rval=imgData.data[i];
    var gval=imgData.data[i+1];
    var bval=imgData.data[i+2];
    var aval=imgData.data[i+3];
    var rgbaval=rval+"-"+gval+"-"+bval+"-"+aval;
    rgbabox.push(rgbaval);
  }
  //end
  for(var j=0;j<rgbabox.length;j++){
    //alert(rgbabox[j].split("-")[0])
    rgbabox[j]='#'+rgbToHex(rgbabox[j].split("-")[0],rgbabox[j].split("-")[1],rgbabox[j].split("-")[2]);    
  }
  nump=countSubstr(rgbabox.join(","),backcolorb,true);
  opacitya=(numl-nump)/numl;
  if(opacitya>opacityb){
    alert("恭喜你获得"+percjcon[numrandom])
  }else{}
 
} 
function rgbToHex(r, g, b) { return ((r << 16) | (g << 8) | b).toString(16); }//rgb转为16进制 #xxx形式
function countSubstr(str,substr,isIgnore){//计算字符串出现子字符串的个数
  var count;
  var reg="";
  if(isIgnore==true){
  reg="/"+substr+"/gi"; 
  }else{
  reg="/"+substr+"/g";
  }
  reg=eval(reg);
  if(str.match(reg)==null){
  count=0;
  }else{
  count=str.match(reg).length;
  }
  return count;
}
//end
</script>
</html>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript中的self和this用法小结
Feb 08 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
VueJS实现用户管理系统
May 29 Javascript
js实现登陆遮罩效果的方法
Jul 28 #Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 #Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 #Javascript
简单的jQuery入门指引
Jul 28 #Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 #Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 #Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 #Javascript
You might like
php中长文章分页显示实现代码
2012/09/29 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
python time模块用法实例详解
2014/09/11 Python
跟老齐学Python之用while来循环
2014/10/02 Python
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python docx库用法示例分析
2019/02/16 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
用Python开发app后端有优势吗
2020/06/29 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
国际贸易个人求职信范文
2014/01/04 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
应聘教师自荐信
2015/03/26 职场文书
催款律师函范文
2015/05/27 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书