【说明】

太极图虽简单，但用arc勾画正确的路径，需要对起止角度和顺逆朝向有清晰的认识。

【图例】

【Canvas与艺术】绘制动态太极图_canvas 太极图 动态

【Canvas与艺术】绘制动态太极图_canvas 太极图 动态_02

【Canvas与艺术】绘制动态太极图_canvas 太极图 动态_03

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>绘制动态太极图</title>
     <style type="text/css">
     .centerlize{
        margin:0 auto;
        width:1200px;
     }
     </style>
     </head>

     <body onload="init();">
        <div class="centerlize">
            <canvas id="myCanvas" width="10px" height="10px" style="border:1px dotted black;">
                如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.
            </canvas>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/

// canvas的绘图环境
var ctx;

// 边长
const LENGTH=540;

// 舞台对象
var stage;

//-------------------------------
// 初始化
//-------------------------------
function init(){
    // 获得canvas对象
    var canvas=document.getElementById('myCanvas');  
    canvas.width=LENGTH;
    canvas.height=LENGTH;

    // 初始化canvas的绘图环境
    ctx=canvas.getContext('2d');  
    ctx.translate(LENGTH/2,LENGTH/2);// 原点平移到画布中央

    // 准备
    stage=new Stage();    
    stage.init();

    // 开幕
    animate();
}

// 播放动画
function animate(){    
    stage.update();    
    stage.paintBg(ctx);
    stage.paintFg(ctx);     

    // 循环
    if(true){
        window.requestAnimationFrame(animate);   
    }
}

// 舞台类
function Stage(){
    var step=0;

    // 初始化
    this.init=function(){

    }

    // 更新
    this.update=function(){
        step++;
        if(step>=60000){
            step=0;
        }
    }

    // 画背景
    this.paintBg=function(ctx){
         ctx.clearRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);// 清屏
         
         // 加上背景色，否则白鱼看不出来
         ctx.fillStyle="cyan";
         ctx.fillRect(-LENGTH/2,-LENGTH/2,LENGTH,LENGTH);
         ctx.fill();
    }

    // 画前景
    this.paintFg=function(ctx){    
        ctx.save();
        ctx.rotate(step*Math.PI/60);
        
        // 左边黑鱼，注意要首尾连续      
        ctx.beginPath();
        ctx.arc(0,-128,128,Math.PI*0.5,Math.PI*1.5,true);// 顺时针
        ctx.arc(0,0,256,Math.PI*1.5,Math.PI*0.5,true);   // 顺时针
        ctx.arc(0,128,128,Math.PI*0.5,Math.PI*1.5,false);// 逆时针
        ctx.closePath();
        ctx.fillStyle="black";
        ctx.fill();

        // 黑鱼白眼    
        ctx.beginPath();        
        ctx.arc(0,-128,32,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fillStyle="white";
        ctx.fill();

        // 右边白鱼，注意要首尾连续      
        ctx.beginPath();
        ctx.arc(0,0,256,Math.PI*1.5,Math.PI*0.5,false);  // 逆时针
        ctx.arc(0,-128,128,Math.PI*0.5,Math.PI*1.5,true);// 顺时针        
        ctx.arc(0,128,128,Math.PI*0.5,Math.PI*1.5,false);// 逆时针
        ctx.closePath();
        ctx.fillStyle="white";
        ctx.fill();

        // 白鱼黑眼    
        ctx.beginPath();        
        ctx.arc(0,128,32,0,Math.PI*2,true);
        ctx.closePath();
        ctx.fillStyle="black";
        ctx.fill();        

        ctx.restore();
    }
}

/*--------------------------------------------------------------------------
《魔鬼的广告》
你若伏地拜我，我就把这一国与这国的荣华赐你；
你若伏地拜我，我就把这一省与这省的荣华赐你；
你若伏地拜我，我就把这一市与这市的荣华赐你；
你若伏地拜我，我就把这一公司与这公司的荣华赐你；
--------------------------------------------------------------------------*/
//-->
</script>

END