今天本来想编写一个炫酷的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>好了，暑假的最后一篇博客就到这里了，下次需要时间的间隔了！！
时间： 2024-11-06 09:33:00