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>