Canvas学习:绘制正多边形

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

到目前为止,我们了解了如何在Canvas中绘制线段矩形圆或圆弧线贝塞尔曲线等。这些都是Canvas的CanvasRenderingContext2D对象自身提供绘制基本图形。但是,我们肯定需要在Canvas中绘制除此之外的其他图形,比如前面所说的绘制箭头或者说我们今天要聊的绘制正多边形。

正多边形

维基百科上是这样描述的:正多边形是所有角都相等、并且所有边都相等的简单多边形,简单多边形是指在任何位置都不与自身相交的多边形

正多边形的特性

n边形每个内角为(1 - 2 / n) * 180或者表示为(n - 2) * 180 / n角度。也可以用弧度表示为(n - 2) * π / n 或者(n - 2) / 2n

正多边形的所有顶点都在同一个外接圆上,每个正多边形都有一个外接圆,这也称为圆内接正多边形

把一个圆分成相等的一些弧,就可以得到这个圆的内接正多边形(Regular Polygon),这个圆就是正多边形的外接圆。外接圆的圆心叫做这个正多边形的中心,外接圆的半径叫做正多边形的半径(Radius),正多边形每一边所对的圆心角叫做正多边形的中心角(圆心角,Central Angle),中心到正多边形的一边的距离叫做正多边形的边心距(Apothem)。

一个圆的圆周是,当边的数目为n时,每一个中心角都是2π / n。半径r、边心距a、边长s 都存在着固定的关系,已知其中的两个,都可由上面的公式求出第三个。

n接近48这个值时,那这个正多边形也就接近是一个圆了。如下图所示:

正多边形属性

先上张图:

上图描述了正多边形的相关属性:

  • 正多边形的中心点正好是一个正多边形的外接圆的圆心
  • 正多边形每条边的长度都相等,如上图中的x
  • 正多边形的每个内角都相等,如上图中的β
  • 正多边形的每个外角都相等,如上图中的α
  • 正多边形的中心角都相等,如上图中的θ
  • 正多边形的中心点距正多边形的内切圆的半行为r
  • 正多边形的顶点数和边数相等,常用n表示
  • 正多边形中心距正多边形的外接圆(或者正多边中心点距正多边形的顶点)就是正多边形外接圆半么,如上图中的R
  • 正多边形中心点距和每条边的端点构成一个等腰三角形,如上图中的A1。这个三角形的两条边长度相等,刚好是正多边形外接圆半径R,而这个三角形的高,刚好是正多边形内切圆半径r

那么在Canvas中要使用CanvasRenderingContext2D对象自带的方法,比如moveTo()lineTo()绘制多边形,我们就必须知道正多边形属性之间的关系。也就是这些属性之间的三角函数。言外之意,在Canvas中,我们使用moveTo()lineTo()方法,再配合一些简单的三角函数,就可以绘制出任意边数的多边形。

既然绘制正多边形需要一定的三角函数知道,我们在绘制正多边形之前,先了简单的了解一下这

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/drawing-regular-polygons.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部