会转的太极

<div id="canvas">
    <canvas width="500" height="500" id="cav">
    </canvas>
</div>
<script type="text/javascript">
    function DrawTaiJi(x, y, r, angle,id) {
        var dom = document.getElementById(id);
        var context = dom.getContext('2d');
        function DrawArc(x, y, r, b, e, style) {
            context.beginPath();
            context.arc(x, y, r, b, e);
            context.lineTo(x, y);
            context.closePath();
            context.fillStyle = style;
            context.fill();
        }
        //计算两个大的半圆的开始与结束的角度
        DrawArc(x, y, r, angle, angle+Math.PI, 'Black');
        DrawArc(x, y, r, angle + Math.PI, angle + 2 * Math.PI, 'White');

        var pieX1 = x + r / 2 * Math.cos(angle),
            pieY1 = y + r / 2 * Math.sin(angle);
        var pieX2 = x - r / 2 * Math.cos(angle),
            pieY2 = y - r / 2 * Math.sin(angle);
        DrawArc(pieX1, pieY1, r / 2, angle, angle + Math.PI, 'White');
        DrawArc(pieX2, pieY2, r / 2, angle + Math.PI, angle+2*Math.PI, 'Black');
        
        DrawArc(pieX1, pieY1, r / 4, 0, 2 * Math.PI, 'Black');
        DrawArc(pieX2, pieY2, r / 4, 0, 2 * Math.PI, 'White');

    }
    var angle = 0;
    function DD() {
        DrawTaiJi(250, 250, 200, angle, 'cav');
        angle+= Math.PI/100;
        setTimeout(DD, 10);
    }
    DD();
</script>