【绘制】HTML5 Canvas正多边形的绘制(三角形、矩形、五边形、六边形等等)
我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
介绍
在Canvas教程中,我们已经实现全部的基本图形,包括线段、矩形、圆弧、圆形、贝塞尔曲线等等。但是我们肯定要再canvas中绘制除此之外的其他图形,比如三角形、六边形、八边形等等。
其实配合moveTo()与lineTo()方法,再结合一些简单的三角函数,就能绘制任意边数的多边形。下面演示了如何利用三角函数绘制多边形的某个部分。
如图展示了如何利用多边形外接圆圆心和半径,计算多边形的顶点。
简单多边形的实现
这里先利用上面的方法实现一个简单的多边形展示demo,让多边形的边可以通过下拉框自由选择。
通过外接圆找到每个顶点的位置,然后根据点的位置依次画出各边即可。