Use a Bagua map canvas painting

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>八卦图</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            text-align: center;
        }
        #myCanvas {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="600"></canvas>

    <Script> get the canvas element//
        
        = document.getElementById myCanvas the let ( "myCanvas" );
         // Get the canvas element by the context (pen) 
        the let myCanvas.getContext CTX = ( "2D" ); 

        // the right white semi 
        ctx.fillStyle = "#fff" ; 
        ctx.beginPath (); 
        ctx.arc ( 300, 300, 100, (Math.PI / 180 [) * 270, (Math.PI / 180 [) * 90 ); 
        ctx.fill (); 

        // black circle on the left 
        ctx = .fillStyle "# 000" ; 
        ctx.beginPath (); 
        ctx.arc ( 300, 300, 100, (Math.PI / 180 [) * 270, (Math.PI / 180 [) 90 *, to true ); // inverse clockwise circle 
        ctx.fill (); 

        // left small round white
        = ctx.fillStyle "#fff" ; 
        ctx.beginPath (); 
        ctx.arc ( 300, 250, 50, (Math.PI / 180 [) * 270, (Math.PI / 180 [) 90 *, to true ); 
        CTX. Fill (); 

        // the right small round black 
        ctx.fillStyle = "# 000" ; 
        ctx.beginPath (); 
        ctx.arc ( 300, 350, 50, (Math.PI / 180 [) * 270, (Math.PI / 180 [) * 90 ); 
        ctx.fill (); 

        // black dots 
        ctx.fillStyle = "# 000" ; 
        ctx.beginPath (); 
        ctx.arc ( 300, 250,. 5, 0, Math.PI 2 * ); 
        ctx.fill (); 

        // small white dots
        ctx.fillStyle = "#fff";
        ctx.beginPath();
        ctx.arc(300, 350, 5, 0, Math.PI * 2);
        ctx.fill();
    </script>
</body>
</html>
Use a Bagua map canvas painting

Guess you like
