三分钟用canvas实现八卦图（制作八卦图的软件）

<canvas>标签是h5新加入的标签，用于绘制图像专用，当然用canvas也是可以实现非常丰富的动画效果，实现动画效果之前必须对canvas基础的图形绘制有足够的了解才能完成。今天就带大家用canvas来绘制一个八卦图。

思路分析：

其实用过AI矢量图形软件的小伙伴对于这个的绘制方法一定非常了解，运用其中的布尔运算可以实现，今天教给大家一种非常简单的方法。

这里要知道一点，就是当绘制一个图形时如果绘制完成没有创建新的路径，那么下次绘图就会紧接着上次末端进行（比如画折线）

这里分成左右两部分绘制，左右两边绘制方法一样，这里就讲解左边绘制方法，如上图所示，首先绘制外面最大的那个圈，绘制角度从π/2到3π/2（逆时针绘制），即图中蓝色半圈，那么此时的末端即是蓝色与红色交界点，然后此时绘制角度从π/2到3π/2（逆时针绘制），即红色半圈，最后一样的思路绘制绿色半圈

参考代码：

内容部分：

样式部分：

JS部分：

实际效果：