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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
javascript禁制后退键(Backspace)实例代码
Nov 15 Javascript
Jquery性能优化详解
May 15 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
Sep 28 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
Vue watch响应数据实现方法解析
Jul 10 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在各种web服务器的运行模式详解
2013/06/03 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP常用编译参数中文说明
2014/09/27 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
Vue性能优化的方法
2020/07/30 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python求crc32值的方法
2014/10/05 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
python实现微信小程序自动回复
2018/09/10 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python 画函数曲线示例
2019/12/04 Python
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
申报材料格式
2014/12/30 职场文书
开国大典观后感
2015/06/04 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
Golang 实现WebSockets
2022/04/24 Golang
volatile保证可见性及重排序方法
2022/08/05 Java/Android