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

【关键点】
使用arc绘制路径，第一要注意角度与顺逆方向，二要注意首尾相连。
【图例】
【代码】
<!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(){

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

    }

    // 更新
    this.update=function(){

    }

    // 画背景
    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();

        // 左边黑鱼，注意要首尾连续      
        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();           
    }

    // 画前景
    this.paintFg=function(ctx){    
        
    }
}

/*--------------------------------------------------------------------------
垃圾公司，不给交五险一金
皮包公司，只给交五险
小公司，外包公司，最低额度交五险一金，合同上写十二薪，年终奖有无不定
一般公司，按比例交五险一金，合同上写十二薪，有年终奖不明写在合同上
好公司，五险一金全额缴纳，合同上写十三薪，离职按比例返还，有补偿
更好公司，五险一金还有补偿缴纳部分，合同上十三薪以上，有N+1补偿
--------------------------------------------------------------------------*/
//-->
</script>
END
posted @ 2017-09-03 16:05 逆火狂飙阅读(1127) 评论(1) 收藏举报
刷新页面返回顶部