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: 670px;
50 top: 120px;
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 var x=670;
69 var a=true;
70 //白色
71 ctx.beginPath();
72 ctx.moveTo(200,200);
73 ctx.arc(500,220,100,0,360,false);
74 ctx.fillStyle='#fff';
75 ctx.shadowBlur=50;
76 ctx.shadowColor='yellow';
77 ctx.fill();
78 ctx.closePath();
79
80 bt1.onclick=function () {
81 clearInterval(time1);
82 time1=setInterval(function () {
83 //x轴方向
84 if(a){
85 x-=3;
86 if (x<=160){
87 x=160;
88 a=false;
89 }
90 mode.style.left=x+"px";
91 }else{
92 x+=3;
93 if(x>=670){
94 x=670;
95 a=true;
96 }
97 mode.style.left=x+"px";
98 }
99 },100)
100 };
101 bt2.onclick=function () {
102 clearInterval(time1);
103 }
104 </script>
105 </body>
106 </html>
