circleMotion.html


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
	</head>

	<body>
		<div id="content">
			<canvas id="canvas" width="400" height="300" style="background:#333"></canvas>
		</div>

		<script src="scripts/tool.js"></script>
		<script id="scripts">
			var canvas = document.getElementById('canvas');
			var ctx = canvas.getContext('2d');
			var centerX = canvas.width/2;
			var centerY = canvas.height/2;
			var radius = 50;
			var balles = []; //存放页面上的球
			// 球函数
			function Ball(x, y, radius) {
				this.x = x;
				this.y = y;
				this.radius = radius;
				this.angle = 0;
				this.scale = 1;
			};
			function drawCircleLine(){
				var x = centerX - 50;
				var y = centerY -50;
				for(var angle = 0; angle < Math.PI *2; angle += 0.1) {
					ctx.fillStyle = '#fff';
					ctx.beginPath();
					x = centerX + Math.sin(angle)*radius;
					y = centerY + Math.cos(angle)*radius;
					ctx.arc(x,y, 2, 2 * Math.PI, true);
					ctx.fill();
				}
			};
			balles.push(new Ball(centerX - 50 ,centerY -50,5));
			var requestID = null;
			//绘制球
			function drawBall() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				drawCircleLine();
				for(var i = 0; i < balles.length; i++) {
					var ball = balles[i];
					ctx.fillStyle = '#fff';
					ctx.beginPath();
					//重新计算球的位置
					ball.x =  centerX + Math.sin(ball.angle)*radius;
					ball.y =  centerY + Math.cos(ball.angle)*radius;
					ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, true);
					ball.angle += 0.1;
					ctx.fill();
				};
				requestID = requestAnimationFrame(drawBall);
			};
			window.onload = function() {
				drawBall();
			};
		</script>
	</body>

</html>