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;
			
			{
				{ // ** 最大半圆
					var r = 100; // ** 半径 
					var x = 400, y = 200; // ** 圆心 坐标  x y

					context.fillStyle="#000000";
					context.beginPath();
					context.arc( x, y, r, Math.PI * 0.5, Math.PI * 1.5, false); // ** 填充左侧半圆为黑色
					context.fill();
				}
				{ // ** 上大半圆
					var r = 50;
					var x = 400, yh = 100, y = yh + r;
					context.moveTo( x, yh );
					context.fillStyle="#000000";
					context.beginPath();
					context.arc( x, y, r, Math.PI * 0.5, Math.PI * 1.5, true);
					context.closePath();
					context.fill();
				}
				{ // ** 上小圆
					var r = 10, br = 100;
					var x = 400, yh = 100, y = yh + br / 2;
					context.moveTo( x, yh );
					context.fillStyle="#ffffff";
					context.beginPath();
					context.arc( x, y, r, 0, Math.PI * 2, true);
					context.closePath();
					context.fill();
				}
				{ // ** 下大半圆
					var r = 50;
					var x = 400, yh = 200, y = yh + r;
					context.moveTo( x, yh );
					context.fillStyle="#ffffff";
					context.beginPath();
					context.arc( x, y, r, Math.PI * 1.5, Math.PI * 0.5, true);
					context.fill();
				}
				{ // ** 下小圆
					var r = 10, br = 100;
					var x = 400, yh = 200, y = yh + br / 2;
					context.fillStyle="#000000";
					context.moveTo( x, yh );
					context.beginPath();
					context.arc( x, y, r, 0, Math.PI * 2, true);
					context.closePath();
					context.fill();
				}
				
				{ // ** 最大圆
					var r = 100; // ** 半径 
					var x = 400, y = 200; // ** 圆心 坐标  x y

					context.strokeStyle="#000000";
					context.beginPath();
					context.arc( x, y, r, 0, Math.PI * 2, false);
					context.stroke();
				}
				
			}