canvas js太极图

以你之姓@ 2022-12-10 12:27 94阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #canvas{ 
                /* background-color: yellow; */
            }
            @-webkit-keyframes rotation { 
                from { 
                    -webkit-transform: rotate(0deg);
                }
                to { 
                    -webkit-transform: rotate(360deg);
                }
            }
           
            #canvas{ 
                -webkit-transform: rotate(360deg);
                animation: rotation 2s linear infinite;
                -moz-animation: rotation 2s linear infinite;
                -webkit-animation: rotation 2s linear infinite;
                -o-animation: rotation 2s linear infinite;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="800" width="800"></canvas>
    </body>
    <script>
        let canvas=document.getElementById('canvas');
        let can;
        if(canvas.getContext('2d')){ 
           can=canvas.getContext('2d')
        }else{ 
            alert('浏览器不支持')
        }
    
        can.beginPath();//开始绘制
        // x,y,r,起点弧度，终止弧度，绘制方向
        can.arc(400,400,300,0,2*Math.PI);
        can.closePath();//停止绘画
        can.fillStyle='white';
        can.fill();
        can.strokeStyle='#000';
        can.lineWidth=4
        can.stroke()
    
    // 左边大半黑圈
        can.beginPath();//开始绘制
        // x,y,r,起点弧度，终止弧度，绘制方向
        can.arc(400,400,300,1.5,1.5*Math.PI);
        can.closePath();//停止绘画
        can.fillStyle='#000';
        can.fill();
    // 上大白点
        can.beginPath();
        can.arc(400,250,150,0,2*Math.PI)
        can.closePath();
        can.fillStyle='white'
        can.fill();
    
    // 上小黑点
        can.beginPath();
        can.arc(400,250,50,0,2*Math.PI)
        can.closePath();
        can.fillStyle='#000'
        can.fill();
    
    
    
    // 下大黑点
        can.beginPath();
        can.arc(400,550,150,0,2*Math.PI);
        can.closePath();
        can.fillStyle='#000'
        can.fill();
    // 下白点
        can.beginPath();
        can.arc(400,550,50,0,2*Math.PI)
        can.closePath();
        can.fillStyle='white'
        can.fill();
    
    
    
    </script>
    </html>