運用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>以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
