太极图

246 阅读1分钟

屏幕截图 2022-03-09 181040.png


    </canvas>
    <script>
        window.onload=function(){
            var mycanvas=document.getElementById("mycanvas");
            var cxt=mycanvas.getContext("2d");

            // 上半圆
            cxt.beginPath();
            cxt.arc(200,200,100,0,Math.PI,true);
            cxt.fillStyle="white";
            cxt.fill();
            cxt.closePath();

            // 下半圆
            cxt.beginPath();
            cxt.arc(200,200,100,0,Math.PI,false);
            cxt.fillStyle="black";
            cxt.fill();
            cxt.closePath();

            // 上半圆中半圆
            cxt.beginPath();
            cxt.arc(150,200,50,0,Math.PI,true);
            cxt.fillStyle="black";
            cxt.fill();
            cxt.closePath();

            // 下半圆中半圆
            cxt.beginPath();
            cxt.arc(250,200,50,0,Math.PI,false);
            cxt.fillStyle="white";
            cxt.fill();
            cxt.closePath();

            // 上半圆中圆
            cxt.beginPath();
            cxt.arc(250,175,25,0,2*Math.PI,true);
            cxt.fillStyle="black";
            cxt.fill();
            cxt.closePath();

            // 下半圆中圆
            cxt.beginPath();
            cxt.arc(150,225,25,0,2*Math.PI,true);
            cxt.fillStyle="white";
            cxt.fill();
            cxt.closePath();
        }
    </script>