canvas3-太极的实现

作者: likeli | 来源:发表于2018-01-02 19:47 被阅读0次

canvas3-太极的实现
旋转的太极圆（2）
一行代码实现太极图(阴阳八卦)
太极功夫与修行
Android超简单实现炫酷的Activity太极图切换动画
如何实现太极图
首届中法太极文化武当论坛于春日在武当山举办
与刘金印先生对谈太极拳养生（下）
352 一日三幸
太极拳就是合气道，鸡打鸣就是合气道

  <!DOCTYPE html>
  <html>
    <head>
        <meta charset="UTF-8">
        <title>太极</title>
    </head>
    <body>
        <canvas id="c1" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var oc=document.getElementById("c1");
        var cont=oc.getContext("2d");
        //
        cont.beginPath();   
        cont.fillStyle="lightgray";
        cont.fillRect(0,0,500,500);     
        cont.stroke();
        //画左侧黑色半圆
        cont.beginPath();       
        cont.arc(250,250,100,Math.PI/2,Math.PI/2*3,false);
        cont.fillStyle="black";
        cont.strokeStyle="transparent"
        cont.fill();
        cont.stroke();
        //画右侧白色半圆
        cont.beginPath();   
        cont.arc(250,250,100,Math.PI/2,Math.PI/2*3,true);
        cont.fillStyle="white";
        cont.strokeStyle="transparent"
        cont.fill();
        cont.stroke();
        //画黑色圆
        cont.beginPath();   
        cont.arc(250,200,50,0,2*Math.PI);
        cont.fillStyle="black";
        cont.strokeStyle="transparent";
        cont.fill();
        cont.stroke();
        //画白色圆
        cont.beginPath();   
        cont.arc(250,300,50,0,2*Math.PI);
        cont.fillStyle="white";
        cont.strokeStyle="transparent";
        cont.fill();
        cont.stroke();
        //画最小的白色圆
        cont.beginPath();   
        cont.arc(250,200,10,0,2*Math.PI);
        cont.fillStyle="white";
        cont.strokeStyle="transparent";
        cont.fill();
        cont.stroke();
        //画最小的黑色圆
        cont.beginPath();   
        cont.arc(250,300,10,0,2*Math.PI);
        cont.fillStyle="black";
        cont.strokeStyle="transparent";
        cont.fill();
        cont.stroke();
    </script>
  </html>

01E92083-9CC3-4B38-9EB2-68594AAB1E74.png