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 相关文章推荐
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
JS刷新框架外页面七种实现代码
Feb 18 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php教程之phpize使用方法
2014/02/12 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
超全面的JavaScript开发规范(推荐)
2017/01/21 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
python+logging+yaml实现日志分割
2019/07/22 Python
python 实现视频 图像帧提取
2019/12/10 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
关于人生的感言
2014/01/17 职场文书
简历的自我评价范文
2014/02/04 职场文书
环境保护标语
2014/06/20 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
2019个人工作总结
2019/06/21 职场文书
导游词之昭君岛
2020/01/17 职场文书
Pandas自定义选项option设置
2021/07/25 Python