從零開始的canvas 刮刮樂
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #Mycanvas { border:1px solid #000; margin:0 auto; } </style> </head> <body> <canvas id="myCanvas" style="border: 1px solid #000000;" ></canvas> <script> var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); var img = new Image(); img.src = "images/img0.jpg"; //完整圖片地址 var str = "images/img"; //圖片地址字首 var nums = "0000000000112233445566778"; //控制圖片出現的概率，此處 圖片0出現的概率為2/5，圖片1出現的概率為1/25，以此類推，可根據自己的需求修改出現概率及圖片 var num = nums.charAt(parseInt(Math.random()*25)); //隨機數生成出現的圖片數字 charAt返回制定位置字元 parseInt返回整數 Math.random 返回0-1的隨機數 var jpg = ".jpg"; //圖片地址的字尾 c.style.backgroundImage = 'url("'+str+num+jpg+'")'; //設定畫布背景為隨機生成的圖片地址 c.style.width = "320px"; c.style.height = "160px"; context.fillStyle = "#ccc"; //填充色 context.globalCompositeOperation = "destination-over"; //與destination-out實現擦除效果 context.beginPath(); //開始繪製 context.fillRect(0,0,320,160); //繪製一個矩形 context.closePath(); c.onmousemove = function(e) { //獲取滑鼠位置 var x = e.pageX - c.offsetLeft; //pageX滑鼠位置 文件邊緣 var y = e.pageY - c.offsetTop; context.globalCompositeOperation = "destination-out"; //將一部份變為out 而不是全部 out部分進行顯示 context.beginPath(); context.arc(x,y,15,0,2*Math.PI,true); //繪製園.之前講過了 context.fill(); //進行填充 context.closePath(); } </script> </body> </html>