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

运用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>

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

时间: 2015-07-27

js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

利用HTML5的画布Canvas实现刮刮卡效果

先给大家展示效果: 查看演示   源码下载 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. 我们利用HTML5的画布Canvas,结合其提供的API,在Canvas元素上绘制一个灰色蒙层,然后通过检测用户鼠标移到和手势来绘制一个透明的图形,这样就能看到Canvas背景下的真实图片,就达到刮刮卡效果. HTML 我们只需要在页面中加入canvas标签元素,其他的就看

canvas实现刮刮卡效果

目前在html5和css3的热潮下,html页面的效果也是层出不穷,下面我们来介绍使用canvas来模仿刮奖刮开效果. 原理 在需要刮出的图片或者文字上方盖上一层灰色或者其他背景的canvas画布,当手指或者鼠标点击画布并移动时,将画布上移动过的轨迹变成透明即可. 分析 demo中在class为content的div上盖上一层灰色的画布,然后通过获取鼠标和手指的坐标计算出在画布位置上的坐标,通过在坐标原点位置画一个半径10px的透明圆形来透过画布,显示出画布下的内容.本demo是用时需要改变的内

2种jQuery 实现刮刮卡效果

其中拖拽刮涂层效果使用jquery UI的draggable方法 以下是源代码: 复制代码 代码如下: <!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"

手机端js和html5刮刮卡效果

H5的Canvas实现刮刮卡效果. 刮开之后是随机生成的8位码. IE8不行... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

手机端实现Bootstrap简单图片轮播效果

个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先是本地站点搭建:win+R输入mmc打开控制台,文件-添加/删除管理单元,Internet信息服务.添加确定,右侧基本信息,新建网站-把路径改了.设定一个端口号,手机浏览器就可以输入  电脑局域网ip:端口号 就可以连上去了. 接下来问题来了,一个个点击查看然后关闭图片是一件更不环保的事.何不做一个

移动端刮刮乐的实现方式(js+HTML5)

程序员有一种惯性思维,就是看见一些会动的东西(带点科技含量的,猫啊,狗啊就算了),总要先想一遍,这玩意用代码是怎么控制的.比如电梯,路边的霓虹灯,遥控器,小孩子的玩具等,都统统被程序员"意淫"过. 有时候还会感觉程序员看世界会看的透彻一点............. 想必大家都玩过刮刮乐,下面就介绍一种刮刮乐的移动端实现方式!用到canvas 1.用HTML 5 canvas globalCompositeOperation 属性实现刮刮乐 思路: (1)首先需要一个盒子定位,确定刮刮乐

jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】

本文实例讲述了jQuery使用eraser.js插件实现擦除.刮刮卡效果的方法.分享给大家供大家参考,具体如下: jquery.eraser是一款使用鼠标或触摸的动作来擦除画布显示真正图片的插件.jquery.eraser插件的原理是用一个画布遮住图片,然后根据触摸或鼠标输入来擦除画布显示图片,您可以在参数中指定一个回调函数设置画笔大小. 使用需知: 必须确保图片是完全加载之后调用eraser(),否则它不会工作.插件正常运行在Safari,Chrome OS X和Windows,Android

js实现PC端和移动端刮卡效果

本文实例为大家分享了js刮卡效果的具体代码,供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <ti

js HTML5手机刮刮乐代码

手机刮刮乐HTML5代码, 使用原型prototype扩展了一个clearArc 清除圆内像素的功能, 此功能未完成扇形清除功能, 此外,在清除圆内的像素时,还有点瑕疵,右边和下边还不够圆滑,有明显的齿状.如果你找到修复方法请一定要告诉我哟.不过此清除方法用于刮刮乐已经完全满足需求了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="view

PHP微信刮刮卡 附微信接口

无论大转盘也好,或者是刮刮卡都是抽奖都可以利用同样的方法来计算中奖的概率和控制奖池的数量,本文为大家分享了PHP微信刮刮卡实例代码,PHP微信刮刮卡+接口,可直接调用,自带微信接口,供大家学习. 效果图: prize.php <?php $rand = rand(1,100); if($rand<10){ $prize = '苹果1个'; }else if($rand<30){ $prize = '苹果2个'; }else if($rand<60){ $prize = '苹果3个'