【绘制】HTML5 Canvas正多边形的绘制（三角形、矩形、五边形、六边形等等）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

介绍

在Canvas教程中，我们已经实现全部的基本图形，包括线段、矩形、圆弧、圆形、贝塞尔曲线等等。但是我们肯定要再canvas中绘制除此之外的其他图形，比如三角形、六边形、八边形等等。

其实配合moveTo()与lineTo()方法，再结合一些简单的三角函数，就能绘制任意边数的多边形。下面演示了如何利用三角函数绘制多边形的某个部分。

如图展示了如何利用多边形外接圆圆心和半径，计算多边形的顶点。

简单多边形的实现

这里先利用上面的方法实现一个简单的多边形展示demo，让多边形的边可以通过下拉框自由选择。

在线演示  详细代码

通过外接圆找到每个顶点的位置，然后根据点的位置依次画出各边即可。