javascript+canvas实现刮刮卡抽奖效果
运用canvas做的简单刮刮卡效果，每次刷新可重新测试
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<styletype="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>
<divstyle="position:relative;margin:20px100px;background:#0CF;height:400px;width:500px;margin:0auto;">
<div>刮刮卡简单抽奖</div>
<divclass="cjbox">
<divclass="sjmes"id="sjmes"></div>
<canvaswidth=200height=80id="canvas"></canvas>
</div>
</div>
</body>
<scripttype="text/javascript">
//init
varcjcon=["一等奖","二等奖","三等奖","谢谢参与"];//奖项设置
varcjper=[3,10,20,100];//奖项率，次数
/*
*sjmes
*@Author透笔度（1530341234@qq.com）
*@param{cjcon}所有奖项
*/
varpercjcon=[];
for(vari=0;i<cjper.length;i++){
peic(cjper[i],i);
};
functionpeic(len,ind){
for(vari=0;i<len;i++){
percjcon.push(cjcon[ind]);
};
};
varsjmes=document.getElementById("sjmes");
varnumrandom=Math.floor(Math.random()*percjcon.length);
sjmes.innerHTML=percjcon[numrandom];
varopacityb=0.5;//透明百分比,参考值,什么程度出现提示
varbackcolorb="#ffaaaa";
varnuml=200*80;//总像素个数
varnump;//出现backcolorb的个数
varopacitya;//透明百分比实际值
varcanvas=document.getElementById("canvas");//获取canvas
varcontext=canvas.getContext('2d');//canvas追加2d画图
varflag=0;//标志，判断是按下后移动还是未按下移动重要
varpenwidth=20;//画笔宽度
context.fillStyle="#faa";//填充的颜色
context.fillRect(0,0,200,80);//填充颜色xy坐标宽高
canvas.addEventListener('mousemove',onMouseMove,false);//鼠标移动事件
canvas.addEventListener('mousedown',onMouseDown,false);//鼠标按下事件
canvas.addEventListener('mouseup',onMouseUp,false);//鼠标抬起事件
varmovex=-1;
varmovey=-1;
varimgData;//imagedada容器
varrgbabox=[];//存放读取后的rgba数据；
functiononMouseMove(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();
}
}
functiononMouseDown(evt){
flag=1;//标志按下
}
functiononMouseUp(evt){
flag=0;
//读取像素数据
imgData=context.getImageData(0,0,200,80);//获取当前画布数据
//imgData.data.length获取图片数据总长度，没4个为一组存放rgba
for(vari=0;i<imgData.data.length;i+=4){
varrval=imgData.data[i];
vargval=imgData.data[i+1];
varbval=imgData.data[i+2];
varaval=imgData.data[i+3];
varrgbaval=rval+"-"+gval+"-"+bval+"-"+aval;
rgbabox.push(rgbaval);
}
//end
for(varj=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{}
}
functionrgbToHex(r,g,b){return((r<<16)|(g<<8)|b).toString(16);}//rgb转为16进制#xxx形式
functioncountSubstr(str,substr,isIgnore){//计算字符串出现子字符串的个数
varcount;
varreg="";
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;
}
returncount;
}
//end
</script>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。