刮刮乐
今天本来想编写一个炫酷的canvas代码的，无奈才疏学浅没有好好学，今天就编写一个刮刮乐的样式吧！
就是这样了，至于代码请往下看：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>刮刮乐效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width:320px;
height:410px;
background:url("img/gao1.jpg") no-repeat;
background-size: 100% 100%;
position: relative;
/*margin: 0 auto;*/
}
#myCanvas{
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div class="box">
<canvas id="myCanvas" width="336" height="410"></canvas>
</div>
</body>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var can = myCanvas.getContext("2d");
var X = myCanvas.width;
var Y = myCanvas.height;
var oImg = new Image();
oImg.src = "img/gao4.jpeg";
oImg.onload = function(){
can.beginPath();
can.drawImage(oImg,0,0,X,Y);
can.closePath();
}
var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
var startEvtName = device?"touchstart":"mousedown";
var moveEvtName = device?"touchmove":"mousemove";
var endEvtName = device?"touchend":"mouseup";
function draw(event){
var x = device?event.touches[0].clientX:event.clientX;
var y = device?event.touches[0].clientY:event.clientY;
//console.log(x,y);
can.beginPath();
can.globalCompositeOperation = "destination-out";
can.arc(x,y,20,0,Math.PI*2,false);
can.fill();
can.closePath();
}
//true 捕获 false 冒泡
myCanvas.addEventListener(startEvtName,function(){
myCanvas.addEventListener(moveEvtName,draw,false);
},false);
myCanvas.addEventListener(endEvtName,function(){
myCanvas.removeEventListener(moveEvtName,draw,false);
},false);
</script>
</html>
好了，暑假的最后一篇博客就到这里了，下次需要时间的间隔了！！
