canvas基礎畫太極圖(娛樂~)

標簽：

Html5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>太极</title>
        <style type="text/css">
            .canvas{
                animation: scroll1 3s linear infinite;
            }
            @keyframes scroll1{
                0%{
                    transform: rotateZ(0deg);
                }
                100%{
                    transform: rotateZ(720deg);
                }
            }
        </style>
    </head>
    <body>
        <canvas class="canvas" id="myCanvas1" width="500" height="500"></canvas>
    </body>
    <script type="text/javascript">
        var myCanvas = document.getElementById('myCanvas1');
        var g = myCanvas.getContext('2d');
//      下半圆
        g.beginPath();
        g.strokeStyle = 'black';
        g.arc(250,250,250,0,Math.PI,false);
//      g.closePath();
        g.fillStyle = 'black';
        g.fill();
        g.stroke();
//      上半圆
        g.beginPath();
        g.strokeStyle = 'black';
        g.arc(250,250,250,0,Math.PI,true);
//      g.closePath();
        g.stroke();
//      右半圆
        g.beginPath();
        g.strokeStyle = 'white';
        g.arc(375,250,125,0,Math.PI,true);
//      g.closePath();
        g.fillStyle = 'black';
        g.fill();
        g.stroke();
//      左半圆
        g.beginPath();
        g.strokeStyle = 'white';
        g.arc(125,250,125,Math.PI,0,true);
//      g.closePath();
        g.fillStyle = 'white';
        g.fill();
        g.stroke();
//      上小圆
        g.beginPath();
        g.strokeStyle = 'black';
        g.arc(375,225,25,0,2*Math.PI,true);
//      g.closePath();
        g.fillStyle = 'white'
        g.fill();
        g.stroke();
//      下小圆
        g.beginPath();
        g.strokeStyle = 'black';
        g.arc(125,275,25,0,2*Math.PI,true);
//      g.closePath();
        g.fillStyle = 'black';
        g.fill();
        g.stroke();
    </script>
</html>

點擊查看更多內容