canvas畫布實現刮刮樂刮獎
阿新 • • 發佈：2019-02-07
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #cv{ /*border:1px solid;*/ position: absolute; left:35px; top:175px; } div{ width: 200px; height: 100px; font-size:30px; line-height: 100px; text-align: center; position:absolute; left:50px; top:185px; } img{ width: 300px; height: 500px; } </style> </head> <body> <img src="./cark.png"> <div id="text"></div> <canvas id="cv" width="247" height="120"></canvas> </body> <script type="text/javascript"> //定義陣列,在隨機抽獎做準備 var arr =["謝謝惠顧","特等獎","張國榮的吻","美女50","豪車100","優酷會員1個月","風油精一打"]; var index = parseInt(Math.random()*arr.length); text.innerHTML=arr[index]; console.log(index); var ctx = cv.getContext("2d"); ctx.beginPath(); //只有灰色區域是畫布,紅色的圖片是新增到body中的 ctx.fillStyle="gray"; ctx.fillRect(0,0,250,120); //顯示源影象之外的目標影象,此刻灰色區域就是目標影象,在mousemove中繪製的圓為源影象 ctx.globalCompositeOperation="destination-out"; ctx.beginPath(); cv.onmousedown = function(e){ document.onmousemove = function(e){ console.log(222); var e = e || window.event; //e.clientX是獲取的關於瀏覽器可視視窗的滑鼠點座標 //求關於灰色區域的滑鼠點位置,就需要減去灰色區域的offsetLeft以及offsetTop var x = e.clientX-cv.offsetLeft; var y = e.clientY-cv.offsetTop; ctx.moveTo(x,y); console.log(x,y); //繪製源圖片,為圓形 ctx.arc(x,y,10,0,Math.PI*2,false); ctx.fill(); //getImageData執行在伺服器環境下:能得到一個物件,物件中的data屬性儲存了關於引數中的四個值, //從哪裡開始獲取獲取多大的影象的每個點的畫素值,四個為一組,分別代表rgba //獲取每次移動的時候畫布上面的所有畫素點,當每第四個值為0時,就表示該畫素點為透明,當所有判斷 //透明度的值有百分之60之上,就清空畫布,將刮獎區完全顯示出來 var mydata = ctx.getImageData(0,0,cv.width,cv.height); var data = mydata.data; var count = 0; for(var i=0;i<data.length;i+=4){ console.log(111); var a = data[i+3]; if(a==0){ count++; console.log(count); } if(count>=data.length/4*0.6){ ctx.clearRect(0,0,cv.width,cv.height); } } } } </script> </html>