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 相关文章推荐
JQuery 写的个性导航菜单
Dec 24 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(三)
2006/10/09 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
jquery中获取select选中值的代码
2011/06/27 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
浅析jquery如何判断滚动条滚到页面底部并执行事件
2016/04/29 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
Javascript 基础---Ajax入门必看
2016/07/06 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
vue实现压缩图片预览并上传功能(promise封装)
2019/01/10 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
Vue Elenent实现表格相同数据列合并
2020/11/30 Vue.js
numpy添加新的维度:newaxis的方法
2018/08/02 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
开会迟到检讨书
2014/02/03 职场文书
消防标语大全
2014/06/07 职场文书
端午节活动总结
2014/08/26 职场文书
铅球加油稿100字
2014/09/26 职场文书
冰雪公主观后感
2015/06/16 职场文书
文书工作总结(范文)
2019/07/11 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
德劲DE1102数字调谐收音机机评
2022/04/07 无线电