Html5 绘制旋转的太极图

采用Html5+JavaScript在Canvas中绘制旋转的太极图，如下图所示：

具体思路和绘制逻辑，在上图中已有说明，代码如下：

<script type="text/javascript">

       //只画边框线，无填充
        function bigCircle(ctx,x, y, r, st, end, w,oc) {
            ctx.lineWidth = w;
            ctx.beginPath();
            ctx.arc(x, y, r, st, end, oc);
            ctx.closePath();
            ctx.stroke();
        }
        //有填充，画小圆，x，y表示大圆的圆心,r表示大圆的半径，w表示线宽，oc表示方向,l表示上下，d表示度数
        function smallCircle(ctx, x, y, r, st, end, w, oc, l,d) {
            var Angle = d * Math.PI / 180; //偏移角用弧度表示
            ctx.lineWidth = w; 
            ctx.beginPath();
            if (l) {
                ctx.fillStyle = "black"; 
                ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r/10, st, end, oc);
            } else {
                ctx.fillStyle = "red";
                ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r/10, st, end, oc);
            }
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }

        //此函数是画带S形曲线的圆，l表示左右，true表示左，顺时针，false表示右，逆时针
        //d表示度数
        function halfCircle(ctx, x, y, r, w, l,d) {
            ctx.lineWidth = w;
            if (l) {
                ctx.fillStyle = "black";
            } else {
                ctx.fillStyle = "red";
            }
            ctx.beginPath();
            var Angle = d * Math.PI / 180;//偏移角用弧度表示

            ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r / 2, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, true);
            ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r / 2, Math.PI*3 / 2 + Angle, Math.PI / 2 + Angle, true);
            ctx.arc(x, y, r, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, l); //顺时针，逆时针通过参数判断
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }

        var num = 0;//表示旋转的度数
        function drawTaichi() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var cX = 200;
            var cY = 200;
            var radius = 150;
            ctx.clearRect(0,0,c.width,c.height);
            //绘制s线 左
            halfCircle(ctx, cX, cY, radius, 1, true, num);
            //右
            halfCircle(ctx, cX, cY, radius, 1, false, num);
            //绘制小圆，上
            smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, true, num);
            //绘制小圆，下
            smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, false, num);
            //绘制外圆
            bigCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 2, true);
            ctx.save();
            num++;
            num = num % 360;//只有360°,所以大于360，就重新开始
        }

        window.onload = function () {
            setInterval(drawTaichi, 200);
        }

    </script>