HTML Canvas 画太极图并且旋转

window.onload = function () {
dwan();

}
var angle = 0;
function dwan() {//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
var o = document.getElementById("myCanvas");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度
//简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
if (canvas.getContext) {
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");

// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
var r = h;
if (r > w) {
r = w;
}

r = r / 2 - 10;

//开始一个新的绘制路径
//外围圆圈

var circle = {
x: w/2, //圆心的x轴坐标值
y: h/2, //圆心的y轴坐标值
r: r //圆的半径
};
ctx.save();
ctx.translate(circle.x, circle.y)
ctx.rotate(angle * Math.PI / 180);
ctx.beginPath();
ctx.lineWidth = 6;
ctx.strokeStyle = "#000000";
//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
ctx.arc(0, 0, circle.r, 0 , 2 * Math.PI , true);
//按照指定的路径绘制弧线
ctx.stroke();
ctx.closePath();

//右侧半圆，涂黑，因为左侧是白色，不需要进行画

ctx.beginPath();
ctx.arc(0, 0, circle.r, 0.5 * Math.PI , 1.5 * Math.PI , true);
//按照指定的路径绘制弧线
ctx.fillStyle = "#000000";
ctx.fill();
ctx.closePath();

//半圆的圆上方
ctx.beginPath();
ctx.arc(0, 0 - r / 2 + 3 , circle.r / 2,0 , 2 * Math.PI , true);
//按照指定的路径绘制弧线
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.closePath();


//半圆的圆下方
ctx.beginPath();
ctx.arc(0 , 0 + r / 2 + 3 , circle.r / 2, 0 , 2 * Math.PI , true);
//按照指定的路径绘制弧线
ctx.fillStyle = "#000000";
ctx.fill();
ctx.closePath();

//小圆上方黑色，半径的1/3
ctx.beginPath();
ctx.arc(0 , 0 - r / 2 + 3 , circle.r / 6, 0, 2 * Math.PI , true);
//按照指定的路径绘制弧线
ctx.fillStyle = "#000000";
ctx.fill();
ctx.closePath();

//小圆下方白色，半径的1/3
ctx.beginPath();
ctx.arc(0 , 0 + r / 2 + 3 , circle.r / 6, 0, 2 * Math.PI, true);
//按照指定的路径绘制弧线
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.closePath();
ctx.restore();

var render = function () {

angle++;
if (angle == 360)
angle = 0;
// 绘制
dwan();

};

setTimeout(render, 1, true);

}
}