1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Making things move</title> 5 <meta charset="gbk"> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function() { 9 var canvas = $("#myCanvas"); 10 var context = canvas.get(0).getContext("2d"); 11 12 var canvasWidth = canvas.width(); 13 var canvasHeight = canvas.height(); 14 var playAnimation = true; 15 16 var startButton = $("#startAnimation"); 17 var stopButton = $("#stopAnimation"); 18 var canvas1 = $("#myCanvas1"); 19 var context1 = canvas1.get(0).getContext("2d"); 20 context1.arc(150,150,100,0,2*Math.PI,true); 21 context1.stroke();//填充绘制的圆 22 context1.beginPath(); 23 context1.arc(300,300,100,0,2*Math.PI,true); 24 context1.strokeStyle="red"; 25 context1.stroke();//填充绘制的圆 26 27 startButton.hide(); 28 startButton.click(function() { 29 $(this).hide(); 30 stopButton.show(); 31 playAnimation = true; 32 animate(); 33 }); 34 35 stopButton.click(function() { 36 $(this).hide(); 37 startButton.show(); 38 playAnimation = false; 39 }); 40 41 // Class that defines new shapes to draw 42 var Shape = function(x, y,radius,angle) { 43 this.x = x; 44 this.y = y; 45 this.radius=radius; 46 this.angle = angle; 47 }; 48 49 50 var shapes = new Array(); 51 shapes.push(new Shape(150, 150, 100,5)); 52 shapes.push(new Shape(300, 300, 100,10)); 53 54 function animate() { 55 context.clearRect(0, 0, canvasWidth, canvasHeight); 56 var shapesLength = shapes.length; 57 for (var i = 0; i < shapesLength; i++) { 58 var tmpShape = shapes[i]; 59 var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180))); 60 var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180))); 61 62 if(i==0) tmpShape.angle += 5; 63 else tmpShape.angle += 10; 64 if (tmpShape.angle > 360) { 65 tmpShape.angle = 0; 66 }; 67 68 context.fillRect(x, y, 10, 10); 69 }; 70 71 if (playAnimation) { 72 setTimeout(animate, 33); 73 }; 74 }; 75 76 animate(); 77 }); 78 </script> 79 </head> 80 81 <body> 82 <div> 83 <button id="startAnimation">Start</button> 84 <button id="stopAnimation">Stop</button> 85 </div> 86 <canvas id="myCanvas" width="800" height="500" style="z-index:2;position:absolute"></canvas> 87 <canvas id="myCanvas1" width="800" height="500" style="z-index:1;position:absolute"></canvas> 88 89 </body> 90 </html>