<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> </head> <body> <div id="wrap"> <div></div> <canvas></canvas> </div> </body> </html>
1 <style type="text/css"> 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 html,body{ 7 height: 100%; 8 overflow: hidden; 9 } 10 #wrap{ 11 height: 100%; 12 overflow: hidden; 13 } 14 #wrap > div{ 15 height: 100%; 16 background: url(img/gg.jpg) no-repeat; 17 background-size:100% 100% ; 18 } 19 canvas{ 20 position: absolute; 21 left: 0; 22 top: 0; 23 } 24 </style>
1 <script> 2 window.onload=function(){ 3 var canvas=document.querySelector(‘canvas‘) 4 canvas.width=document.documentElement.clientWidth; 5 canvas.height=document.documentElement.clientHeight;//视口 6 if(canvas.getContext){ 7 var ctx=canvas.getContext(‘2d‘) 8 //引入图片 9 var img=new Image(); 10 img.src="img/cover.jpg"; 11 img.onload=function(){ 12 drap(ctx,img) 13 } 14 } 15 function drap(ctx,img){ 16 ctx.drawImage(img,0,0,canvas.width,canvas.height) 17 //移动端手指 18 touaddEventListener(‘touchstart‘) 19 touaddEventListener(‘touchmove‘) 20 } 21 function touaddEventListener(el){ 22 canvas.addEventListener(el,function(e){ 23 var ev=e||event 24 //手指 25 var touchC=ev.changedTouches[0] 26 var x=touchC.clientX; 27 var y=touchC.clientY; 28 ctx.save() 29 ctx.beginPath() 30 ctx.globalCompositeOperation=‘destination-out‘ 31 ctx.arc(x,y,20,0,360*Math.PI/180) 32 ctx.fill() 33 ctx.restore() 34 }) 35 } 36 37 } 38 39 </script>
