canvas绘制八卦图

1.创建图形容器

<canvas id="myCanvas" width="500px" height="500px"></canvas>

2.绘制图形

<script>
        //获取canvas元素
        var myCanvas = document.getElementById("myCanvas");
        //创建画布对象
        var context = myCanvas.getContext("2d");

        //画圆
        context.beginPath();
        context.strokeStyle = "#000"
        context.arc(200,200,100,0,Math.PI*2);
        context.closePath();
        context.stroke();

        //左边半圆 填充
        context.beginPath();
        context.arc(200,200,100,Math.PI/2,Math.PI*3/2);
        context.closePath();
        context.fill();

        //上面的小圆
        context.beginPath();
        context.arc(200,150,50,0,Math.PI*2);
        context.closePath();
        context.fill();

        //下面的小圆
        context.beginPath();
        context.fillStyle = "#fff"
        context.arc(200,250,50,0,Math.PI*2);
        context.closePath();
        context.fill();

        //上面的小圆中的小圆
        context.beginPath();
        context.fillStyle = "#fff"
        context.arc(200,150,20,0,Math.PI*2);
        context.closePath();
        context.fill();

        //下面的小圆中的小圆
        context.beginPath();
        context.fillStyle = "#000"
        context.arc(200,250,20,0,Math.PI*2);
        context.closePath();
        context.fill();
    </script>