刮刮乐html5效果,HTML5 简单实现刮刮乐效果

doctype html>

script>

JS刮刮乐title>

}#myCanvas{position:absolute;left:0;top:0;

}

style>

head>

canvas>

div>

vararr=["img/aa.png","img/bb.png","img/cc.png","img/dd.png"];

window.οnlοad= function(){

console.log((Math.random()*3).toFixed(0)+"+"+arr[(Math.random()*3).toFixed(0)]);varmyCanvas=document.getElementById("myCanvas");varcan=myCanvas.getContext("2d");varX=myCanvas.width;varY=myCanvas.height;varoImg= newImage();

oImg.src= "img/gao4.jpeg";vardevice= /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());

oImg.οnlοad= function(){

can.beginPath();

can.drawImage(oImg,0,0,X,Y);

can.closePath();

}vartochstrat=device?"touchstart":"mousedown";vartochmove=device?"touchmove":"mousemove";vartochend=device?"touchend":"mouseup";functiondraw(event){varx=device?event.touches[0].clientX:event.clientX;vary=device?event.touches[0].clientY:event.clientY;

console.log("X:"+x+"Y:"+y);

can.beginPath();//

can.globalCompositeOperation= "destination-out";

can.arc(x,y,20,0,Math.PI*2,false);

can.fill();

can.closePath();

}

myCanvas.addEventListener(tochstrat,function(){

myCanvas.addEventListener(tochmove,draw,false);

},false);

myCanvas.addEventListener(tochend,function(){

myCanvas.addEventListener(tochmove,draw,false);

},false);

$("#box").css("background-image","url("+arr[(Math.random()*3).toFixed(0)]+")");

}script>

body>

html>