javascript+canvas實現刮刮卡抽獎效果

2024-05-06 16:23:57

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了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>