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>
