<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>刮刮乐</title> </head> <body> <canvas>你的浏览器不支持canvas标签</canvas> <script> var arr=['img/1.jpg','img/2.jpg']; var flag=0; var obj=[]; //图片预加载 for(var i=0;i<2;i++) { var img=new Image(); img.src=arr[i]; obj[i]=img; img.onload=function() { flag++; if(flag==arr.length) { callback(obj); } } } function callback(obj) { var mycanvas=document.querySelector('canvas'); //10%的中奖率 var num=Math.ceil(Math.random()*10); if(num==8) { mycanvas.style.background='url('+arr[1]+')'; }else { mycanvas.style.background='url('+arr[0]+')'; } //绘制一个遮盖层 var ctx=mycanvas.getContext("2d"); ctx.fillStyle='#ccc'; ctx.fillRect(0,0,mycanvas.width,mycanvas.height); //刮开效果 mycanvas.onmousedown=function() { mycanvas.onmousemove=function(e) { e=e||window.event; var mouseX=e.offsetX; var mouseY=e.offsetY; ctx.clearRect(mouseX,mouseY,10,10); } } mycanvas.onmouseup=document.onmouseup=function() { mycanvas.onmousemove=null; } } </script> </body> </html>
