700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 【绘制】HTML5 Canvas正多边形的绘制(三角形 矩形 五边形 六边形等等)

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

时间:2020-12-24 18:37:11

相关推荐

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

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

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

传送门:/827652549/CanvasStudy

介绍

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

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

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

简单多边形的实现

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

在线演示 详细代码

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。