javascript+canvas實(shí)現(xiàn)刮刮卡抽獎(jiǎng)效果
運(yùn)用canvas做的簡(jiǎn)單刮刮卡效果,每次刷新可重新測(cè)試
<!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>刮刮卡簡(jiǎn)單抽獎(jiǎng)</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=["一等獎(jiǎng)","二等獎(jiǎng)","三等獎(jiǎng)","謝謝參與"];//獎(jiǎng)項(xiàng)設(shè)置 var cjper=[3,10,20,100];//獎(jiǎng)項(xiàng)率,次數(shù) /* * sjmes * @Author 透筆度(1530341234@qq.com) * @param {cjcon} 所有獎(jiǎng)項(xiàng) */ 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;//透明百分比,參考值,什么程度出現(xiàn)提示 var backcolorb="#ffaaaa"; var numl=200*80;//總像素個(gè)數(shù) var nump;//出現(xiàn)backcolorb的個(gè)數(shù) var opacitya;//透明百分比實(shí)際值 var canvas = document.getElementById("canvas"); //獲取canvas var context = canvas.getContext('2d'); //canvas追加2d畫圖 var flag = 0; //標(biāo)志,判斷是按下后移動(dòng)還是未按下移動(dòng) 重要 var penwidth=20; //畫筆寬度 context.fillStyle="#faa"; //填充的顏色 context.fillRect(0,0,200,80); //填充顏色 x y坐標(biāo) 寬 高 canvas.addEventListener('mousemove', onMouseMove, false); //鼠標(biāo)移動(dòng)事件 canvas.addEventListener('mousedown', onMouseDown, false); //鼠標(biāo)按下事件 canvas.addEventListener('mouseup', onMouseUp, false); //鼠標(biāo)抬起事件 var movex=-1; var movey=-1; var imgData;//imagedada容器 var rgbabox=[];//存放讀取后的rgba數(shù)據(jù); 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計(jì)算方法,是圓 context.closePath(); context.fill(); } } function onMouseDown(evt) { flag = 1; //標(biāo)志按下 } function onMouseUp(evt) { flag = 0; //讀取像素?cái)?shù)據(jù) imgData=context.getImageData(0,0,200,80);//獲取當(dāng)前畫布數(shù)據(jù) //imgData.data.length 獲取圖片數(shù)據(jù)總長(zhǎng)度,沒4個(gè)為一組存放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轉(zhuǎn)為16進(jìn)制 #xxx形式 function countSubstr(str,substr,isIgnore){//計(jì)算字符串出現(xiàn)子字符串的個(gè)數(shù) 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>
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
相關(guān)文章
JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解
這篇文章主要介紹了JS?中數(shù)組的增刪改查和對(duì)象的增刪改查實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07一定有你會(huì)用到的JavaScript一行代碼實(shí)用技巧總結(jié)
這篇文章主要為大家介紹了一定有你會(huì)用到的JavaScript一行代碼總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序?qū)崿F(xiàn)的繪制table表格功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的繪制table表格功能,涉及微信小程序數(shù)據(jù)讀取及界面布局相關(guān)操作技巧,需要的朋友可以參考下2019-04-04JS Ajax請(qǐng)求會(huì)話過期處理問題解決方法分析
這篇文章主要介紹了JS Ajax請(qǐng)求會(huì)話過期處理問題解決方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了ajax請(qǐng)求會(huì)話過期處理的相關(guān)原理、解決方法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11JavaScript浮點(diǎn)數(shù)及運(yùn)算精度調(diào)整詳解
浮點(diǎn)數(shù)的精度問題不是JavaScript特有的,本文主要介紹了JavaScript浮點(diǎn)數(shù)及運(yùn)算精度調(diào)整詳解,有需要的朋友可以了解一下。2016-10-10js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07mvc 、bootstrap 結(jié)合分布式圖簡(jiǎn)單實(shí)現(xiàn)分頁(yè)
這篇文章主要介紹了mvc 、bootstrap 結(jié)合分布式圖簡(jiǎn)單實(shí)現(xiàn)分頁(yè)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10js 靜態(tài)HTML表格排序功能實(shí)現(xiàn)
對(duì)于對(duì)于一些表格按價(jià)格 等進(jìn)行排序,方便用戶對(duì)當(dāng)前頁(yè)面的高低價(jià)格排序,用戶體驗(yàn)性好2009-02-02