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

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

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

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

介绍

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

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

【绘制】HTML5 Canvas正多边形的绘制(三角形、矩形、五边形、六边形等等)_第1张图片

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

简单多边形的实现

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

在线演示  详细代码

【绘制】HTML5 Canvas正多边形的绘制(三角形、矩形、五边形、六边形等等)_第2张图片

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

你可能感兴趣的:(【绘制】HTML5 Canvas正多边形的绘制(三角形、矩形、五边形、六边形等等))