Html5 Canvas 齿轮

   无意中弄出来的, 呵呵, 别笑话哈

 

<canvas id="canvas-dom" style="border:1px solid #ccc;" width="800" height="500">
    Your browser not support canvas tag.
</canvas>

 

			var canvas = document.getElementById("canvas-dom");
			var context = canvas.getContext("2d");
			
			context.lineWidth = 1;
			context.strokeStyle = "#ffffff";
			
			
				{ // ** 最大圆,下面是分别画半圆,组成一个圆,不用管
					var r = 100;
					var x = 400, y = 200;
					
					context.fillStyle="#000000";
					context.beginPath();
					context.arc( x, y, r, Math.PI * 0.5, Math.PI * 1.5, false); // ** 逆时针 按时钟从 6 - 5 - 4 - 3 - 2 - 1 - 12 画圆
					context.closePath();
					context.fill();
					
					context.fillStyle="#000000";
					context.beginPath();
					context.arc( x, y, r, Math.PI * 0.5, Math.PI * 1.5, true); // ** 顺时针 按时钟从 6 - 7 - 8 - 9 - 10 - 11 - 12 画圆
					context.closePath();
					context.fill();
				}
				
				// ** x = x1 + cos(d);   x1: 圆心坐标 x
				// ** y = y1 + sin(d);   y1: 圆心坐标 y
				// ** d: 0 ~ 2π , 因此我就用 角度/180°, 得到的值正好介于 0 ~ 2π
				var r = 100;
				var a = 400, b = 200;
				var d = 0;
				for (; d <= 360;) {
					var x = Math.cos( d / 180 * Math.PI ) * r + a; // ** 获取当前角度 d 对应的 x 坐标 
					var y = Math.sin( d / 180 * Math.PI ) * r + b; // ** 获取当前角度 d 对应的 y 坐标 
					{
						var br = 10;
						context.fillStyle="#ffffff";
						context.beginPath();
						context.arc( x, y, br, 0, Math.PI * 2, true); // ** 顺时针 按时钟从 12 - 3 - 6 - 9 - 12 画圆
						context.closePath();
						context.fill();
					}
					 d += 20; // ** 角度每次递增 20°
				}