<!DOCTYPE html>
<html>
<head>
<title>Making things move</title>
<meta charset="gbk">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d"); var canvasWidth = canvas.width();
var canvasHeight = canvas.height();
var playAnimation = true; var startButton = $("#startAnimation");
var stopButton = $("#stopAnimation");
var canvas1 = $("#myCanvas1");
var context1 = canvas1.get(0).getContext("2d");
context1.arc(150,150,100,0,2*Math.PI,true);
context1.stroke();//填充绘制的圆
context1.beginPath();
context1.arc(300,300,100,0,2*Math.PI,true);
context1.strokeStyle="red";
context1.stroke();//填充绘制的圆 startButton.hide();
startButton.click(function() {
$(this).hide();
stopButton.show();
playAnimation = true;
animate();
}); stopButton.click(function() {
$(this).hide();
startButton.show();
playAnimation = false;
}); // Class that defines new shapes to draw
var Shape = function(x, y,radius,angle) {
this.x = x;
this.y = y;
this.radius=radius;
this.angle = angle;
}; var shapes = new Array();
shapes.push(new Shape(150, 150, 100,5));
shapes.push(new Shape(300, 300, 100,10)); function animate() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
var shapesLength = shapes.length;
for (var i = 0; i < shapesLength; i++) {
var tmpShape = shapes[i];
var x = tmpShape.x+(tmpShape.radius*Math.cos(tmpShape.angle*(Math.PI/180)));
var y = tmpShape.y+(tmpShape.radius*Math.sin(tmpShape.angle*(Math.PI/180))); if(i==0) tmpShape.angle += 5;
else tmpShape.angle += 10;
if (tmpShape.angle > 360) {
tmpShape.angle = 0;
}; context.fillRect(x, y, 10, 10);
}; if (playAnimation) {
setTimeout(animate, 33);
};
}; animate();
});
</script>
</head> <body>
<div>
<button id="startAnimation">Start</button>
<button id="stopAnimation">Stop</button>
</div>
<canvas id="myCanvas" width="800" height="500" style="z-index:2;position:absolute"></canvas>
<canvas id="myCanvas1" width="800" height="500" style="z-index:1;position:absolute"></canvas> </body>
</html>