如何用前端JS代码绘制一个精美的长尾词太极图案？

本文共计978个文字，预计阅读时间需要4分钟。

目录 + 正文 + canvas + 实现 + 绘制黑色圆 + 完整DEMO + Style + Script + 正文 + 本篇我们实现一个看似复杂但实际简单的图形效果，就像下图的极端案例+ 初看这个图案时可能感觉有复杂的无头绪，因为“

目录

• 正文
• canvas 实现
• 绘制黑色圆
• 完整DEMO
• Style
• Script

正文

本篇我们实现一个看似复杂毫无头绪，但实际上简单无比的图形，就是下图的太极图案

刚看到这个图案时候可能毫无头绪，因为各种圆弧，在实现时甚至都不知道应该用什么函数，但如果我们换一种样式，看起来是不是简单很多：

我们这次不使用 HTML + CSS 实现该图案，改用 canvas 来弄。