<canvas>标签是h5新加入的标签，用于绘制图像专用，当然用canvas也是可以实现非常丰富的动画效果，实现动画效果之前必须对canvas根本的图形绘制有足够的理解才能完成。本日就带大家用canvas来绘制一个八卦图。
思路剖析：
其实用过AI矢量图形软件的小伙伴对付这个的绘制方法一定非常理解，利用个中的布尔运算可以实现，本日教给大家一种非常大略的方法。
这里要知道一点，便是当绘制一个图形时如果绘制完成没有创建新的路径，那么下次绘图就会紧接着上次末端进行（比如画折线）
这里分成旁边两部分绘制，旁边两边绘制方法一样，这里就讲解左边绘制方法，如上图所示，首先绘制表面最大的那个圈，绘制角度从π/2到3π/2（逆时针绘制），即图中蓝色半圈，那么此时的末端即是蓝色与赤色交界点，然后此时绘制角度从π/2到3π/2（逆时针绘制），即赤色半圈，末了一样的思路绘制绿色半圈
参考代码：
内容部分：
样式部分：
JS部分：
实际效果：