如何用前端JS代码绘制一个太极图案图文示例？

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

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

目录

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

正文

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

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

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