1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * 8 { 9 margin: 0; 10 padding: 0; 11 } 12 #box 13 { 14 width: 1000px; 15 height: 600px; 16 margin: 50px auto; 17 position: relative; 18 } 19 #can 20 { 21 background: #000; 22 } 23 #bt1,#bt2 24 { 25 background: #000; 26 color: #fff; 27 font-size: 25px; 28 position: fixed; 29 left:40px; 30 border: none; 31 } 32 #bt1 33 { 34 top: 230px; 35 } 36 #bt2 37 { 38 top: 300px; 39 } 40 #mode 41 { 42 width: 200px; 43 height: 200px; 44 background: #000; 45 position: absolute; 46 -webkit-border-radius:50%; 47 -moz-border-radius:50%; 48 border-radius:50%; 49 left: 620px; 50 top: 195px; 51 } 52 </style> 53 </head> 54 <body> 55 <div id="box"> 56 <canvas width="1000" height="600" id="can"></canvas> 57 <div id="mode"></div> 58 </div> 59 <button id="bt1">start</button> 60 <button id="bt2">stop</button> 61 <script > 62 var bt1=document.getElementById('bt1'); 63 var bt2=document.getElementById('bt2'); 64 var mode=document.getElementById('mode'); 65 var can=document.getElementById('can'); 66 var ctx=can.getContext('2d'); 67 var time1=null; 68 //白色 69 ctx.beginPath(); 70 ctx.moveTo(200,200); 71 ctx.arc(500,220,100,0,360,false); 72 ctx.fillStyle='#fff'; 73 ctx.shadowBlur=50; 74 ctx.shadowColor='yellow'; 75 ctx.fill(); 76 ctx.closePath(); 77 //黑色 78 var x=620,y=195; 79 var a=true,b=true; 80 bt1.onclick=function () { 81 clearInterval(time1); 82 time1=setInterval(function () { 83 console.log(x); 84 //x轴方向 85 if(a){ 86 x-=3; 87 if (x<=168){ 88 x=168; 89 a=false; 90 } 91 mode.style.left=x+"px"; 92 }else{ 93 x+=2; 94 if(x>=620){ 95 x=620; 96 a=true; 97 } 98 mode.style.left=x+"px"; 99 } 100 //y轴方向 101 if(b){ 102 y--; 103 if(y<=45){ 104 y=250; 105 b=false; 106 } 107 mode.style.top=y+"px"; 108 }else { 109 y++; 110 if(y>=195) 111 { 112 y=195; 113 b=true; 114 } 115 mode.style.top=y+"px"; 116 } 117 },100) 118 }; 119 bt2.onclick=function () { 120 clearInterval(time1); 121 } 122 </script> 123 </body> 124 </html>
