刮刮卡 html5,使用HTML5实现刮刮卡效果

DOCTYPE>

title>

.demo{width:320px;margin:10px auto 20px;min-height:300px;

}

style>

head>

canvas>

div>

varbodyStyle=document.body.style;

bodyStyle.mozUserSelect= "none";

bodyStyle.webkitUserSelect= "none";varimg= newImage();varcanvas=document.querySelector("canvas");

canvas.style.backgroundColor= "transparent";

canvas.style.position= "absolute";varimgs=['p_0.jpg',"p_1.jpg"];varnum=Math.floor(Math.random()*2);

img.src=imgs[num];

img.addEventListener("load",function(){varctx;varw=img.width,

h=img.height;varoffsetX=canvas.offsetLeft,

offsetY=canvas.offsetTop;varmousedown= false;functionlayer(ctx){

ctx.fillStyle= "gray";

ctx.fillRect(0,0,w,h);

}functioneventDown(e){

e.preventDefault();

mousedown= true;

}functioneventUp(e){

e.preventDefault();

mousedown= false;

}functioneventMove(e){

e.preventDefault();if(mousedown){if(e.changedTouches){

e=e.changedTouches[e.changedTouches.length-1];

}varx=(e.clientX+document.body.scrollLeft||e.pageX)-offsetX|| 0,

y=(e.clientY+document.body.scrollTop||e.pageY)-offsetY|| 0;with(ctx){

beginPath()

arc(x,y,10,0,Math.PI* 2);

fill();

}

}

}

canvas.width=w;

canvas.height=h;

canvas.style.backgroundImage= 'url('+img.src+')';

ctx=canvas.getContext("2d");

ctx .fillStyle= "transparent";

ctx.fillRect(0,0, w, h);

layer(ctx);

ctx.globalCompositeOperation= "destination-out";//在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。

canvas.addEventListener("touchstart", eventDown);

canvas.addEventListener("touchend",eventUp);

canvas.addEventListener('touchmove', eventMove);

canvas.addEventListener("mousedown", eventDown);

canvas.addEventListener("mouseup", eventUp);

canvas.addEventListener("mousemove", eventMove)

})script>

body>

html>