实现效果如下：

 

 

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>太极八卦图</title>
    <style type="text/css">
        div{
            text-align: center;
            margin-top: 30px;
        }
        #mytj{
            background-color: skyblue;        
        }
    </style>
</head>
<body>
    <div>
        <canvas width="600px" height="600px" id="mytj"></canvas>
    </div>
    <script type="text/javascript">
        var mytj = document.getElementById('mytj');
        var mt = mytj.getContext('2d');

        //左边黑色大半圆
        mt.beginPath();    
        mt.arc(300,300,200,90*Math.PI/180,270*Math.PI/180,false);
        mt.fillStyle='#000';
        mt.fill();

        //右边白色大半圆
        mt.beginPath();    
        mt.arc(300,300,200,270*Math.PI/180,90*Math.PI/180,false);
        mt.fillStyle='#fff';
        mt.fill();

        //左边白色中半圆
        mt.beginPath();    
        mt.arc(300,200,100,90*Math.PI/180,270*Math.PI/180,false);
        mt.fillStyle='#fff';
        mt.fill();

        //右边黑色中半圆
        mt.beginPath();    
        mt.arc(300,400,100,270*Math.PI/180,90*Math.PI/180,false);
        mt.fillStyle='#000';
        mt.fill();

        //左边黑色小圆
        mt.beginPath();    
        mt.arc(300,200,50,0*Math.PI/180,360*Math.PI/180,false);
        mt.fillStyle='#000';
        mt.fill();

        //右边白色小圆
        mt.beginPath();    
        mt.arc(300,400,50,0*Math.PI/180,360*Math.PI/180,false);
        mt.fillStyle='#fff';
        mt.fill();

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