canvas太极八卦图

我们在画太极图时，首先得知道思路是怎样的

1、先画一个大圆；

2、大圆两边分别是颜色黑、白的半圆；

3、然后再是两个小圆组成的弧形；

4、再是更小的圆组成的小圆点。

好的，理清了思路，我们就开始写了

获取canvas元素

var myCanvas = document.getElementById('myCanvas');

 创建画布对象

var context = myCanvas.getContext('2d');

canvas元素本身是不具备绘图能力的，我们要通过getContext（）方法来得到画布对象

接下来就是绘图过程了

1、画大圆

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

2、左边半圆填充，使得两边颜色不同

context.beginPath();
        context.arc(200,200,100,Math.PI/2,Math.PI*3/2);
        context.closePath();
        context.fill();

3、小圆

3.1上边的小圆

context.beginPath();
        context.arc(200,150,50,0,Math.PI*2);
        context.closePath();
        context.fill();

3.2下边的小圆

context.beginPath();
        context.fillStyle = "#fff";
        context.arc(200,250,50,0,Math.PI*2);
        context.closePath();
        context.fill();

4、八卦图最小的圆

4.1上边的最小圆

context.beginPath();
        context.fillStyle = "#fff";
        context.arc(200,150,20,0,Math.PI*2);
        context.closePath();
        context.fill();

4.2下边的最小圆

context.beginPath();
        context.fillStyle = "#000";
        context.arc(200,250,20,0,Math.PI*2);
        context.closePath();
        context.fill();

最终显示为：

 冲冲冲！！！