旋转的太极图

1.创建一个画布，获取canvas节点

 

<canvas id="c" width="500" height="500"></canvas>//创建canvas节点
        <script type="text/javascript">
            var canvas = document.getElementById('c');
            var c = canvas.getContext('2d');//获取canvas对象
       <script>

 

 

 

然后先设置定时器，在定时器中先位移canvas的起点，canvas的起点默认在画布的左上角（0，0）

 

setInterval(()=>{
                // 清空画布
                c.clearRect(0,0,500,500);
                c.save();//保存状态
                
                c.translate(250,250);//位移canvas的起点到画布的中心
                
                taiji();//然后调用taiji函数以起点在画布的中心画图
                
                c.restore()//恢复状态
                
            },100);

 

设置之后的起点在画图的中心

 

 

然后开始在以（250,250）为起点的画布画静态的太极

function taiji(){
                // 绘制黑色半圆
                c.beginPath();
                c.arc(0,0,200,-0.5*Math.PI,0.5*Math.PI,true);
                c.closePath();
                c.fillStyle='black';
                c.fill();
                
                // 绘制白色半圆
                c.beginPath();
                c.arc(0,0,200,-0.5*Math.PI,0.5*Math.PI);
                c.closePath();
                c.fillStyle='white';
                c.fill();
                
                // 绘制小白色半圆
                c.beginPath();
                c.arc(0,100,100,-0.5*Math.PI,0.5*Math.PI,true);
                c.closePath();
                c.fillStyle='white';
                c.fill();
                
                // 绘制小黑色半圆
                c.beginPath();
                c.arc(0,-100,100,-0.5*Math.PI,0.5*Math.PI);
                c.closePath();
                c.fillStyle='black';
                c.fill();
                
                // 绘制黑色小圆
                c.beginPath();
                c.arc(0,100,30,0,2*Math.PI);
                c.closePath();
                c.fillStyle='black';
                c.fill();
                
                // 绘制白色小圆
                c.beginPath();
                c.arc(0,-100,30,0,2*Math.PI);
                c.closePath();
                c.fillStyle='white';
                c.fill();
            }

 

最后开始调用旋转

// 太极旋转
            var i= 0;
            setInterval(()=>{
                // 清空画布
                c.clearRect(0,0,500,500);
                c.save();//保存状态
                c.translate(250,250);
                // 旋转
                c.rotate(Math.PI/180*i);
                i+=5;
                // taiji();
                c.restore()//恢复状态
                
            },100);
image-20201111200313660

 

 

 

 

 

最后附上完整的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #c {
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <canvas id="c" width="500" height="500"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById('c');
            var c = canvas.getContext('2d');
            function taiji(){
                // 绘制黑色半圆
                c.beginPath();
                c.arc(0,0,200,-0.5*Math.PI,0.5*Math.PI,true);
                c.closePath();
                c.fillStyle='black';
                c.fill();
                
                // 绘制白色半圆
                c.beginPath();
                c.arc(0,0,200,-0.5*Math.PI,0.5*Math.PI);
                c.closePath();
                c.fillStyle='white';
                c.fill();
                
                // 绘制小白色半圆
                c.beginPath();
                c.arc(0,100,100,-0.5*Math.PI,0.5*Math.PI,true);
                c.closePath();
                c.fillStyle='white';
                c.fill();
                
                // 绘制小黑色半圆
                c.beginPath();
                c.arc(0,-100,100,-0.5*Math.PI,0.5*Math.PI);
                c.closePath();
                c.fillStyle='black';
                c.fill();
                
                // 绘制黑色小圆
                c.beginPath();
                c.arc(0,100,30,0,2*Math.PI);
                c.closePath();
                c.fillStyle='black';
                c.fill();
                
                // 绘制白色小圆
                c.beginPath();
                c.arc(0,-100,30,0,2*Math.PI);
                c.closePath();
                c.fillStyle='white';
                c.fill();
            }
            
            
            // 太极旋转
            var i= 0;
            setInterval(()=>{
                // 清空画布
                c.clearRect(0,0,500,500);
c.save();//保存状态
c.translate(250,250);
// 旋转
c.rotate(Math.PI/180*i);
i+=5;
// taiji();
c.restore()//恢复状态

    },100);



</script>
</body>
</html>
​

 

 

posted @ 2020-11-11 20:10  小不点灬  阅读(389)  评论(0)  编辑  收藏  举报