特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
圆和圆弧是图形中基本图形之一,今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单。在Canvas中,CanvasRenderingContext2D
对象提供了两个方法(arc()
和arcTo()
)来绘制圆和圆弧。
与圆和圆弧相关的基础知识
在学习如何绘制圆和圆弧之前,有一些相关的基础知识有必要先进行了解。
- 角度旋转
- 角度和弧度
- 正切
角度旋转
在坐标系中,旋转分为顺时针和逆时针两个方向旋转:
角度和弧度
在CSS中,做旋转常用到的都是角度(deg
)。但在Canvas中绘制圆或圆弧时用到的是弧度(rad
)。维基百科中是这样描述弧度的:
弧度又称弪度,是平面角的单位,也是国际单位制导出单位。单位弧度定义为圆弧长度等于半径时的圆心角。角度以弧度给出时,通常不写弧度单位,或有时记为
rad
。
一个完整的圆的弧度是2π
,所以2π rad = 360°
,1 π rad = 180°
,1°=π/180 rad
,1 rad = 180°/π
(约57.29577951°
)。以度数表示的角度,把数字乘以π/180
便转换成弧度;以弧度表示的角度,乘以180/π
便转换成度数。
rad = (π / 180) * deg
同样的:
deg = (rad * 180) / π
平时我们常看到的各种弧度如下:
JavaScript中弧度角度换算
仅难了解角度和弧度之间的关系是不够的,我们还需要知道怎么使用JavaScript来实现角度和弧度之间的换算。一个π
大约是3.141592653589793
,在JavaScript中对应的是Math.PI
。那么角度和弧度之间的换算:
rad = (Math.PI * deg) / 180
同样的:
deg = (rad * 180) / Math.PI
为了方便计算和使用,可以将其封装成JavaScript函数:
function getRads (degrees) {
return (Math.PI * degrees) / 180;
}
function getDegrees (rads) {
return (rads * 180) / Math.PI;
}
比如我们要将30deg
转换成rad
,可以直接使用:
getRads(30); // 0.5235987755982988rad
getDegrees(0.7853981633974483); // 45deg
下图展示了常见的角度和弧度之间的换算:
正切
正切(Tangent,tan,也作tg)是三角函数的一种。它是周期函数,其最小正周期为π
(Math.PI
)。正切函数是奇函数。
在Canvas中常常需要和三角函数打交道,这也说明了数学是多么的重要,真后悔当初没有认真学。有关于Canvas中三角函数的运用,后面我们将会花很大的篇幅来介绍。
为什么在画圆要提到正切呢?那是因为我们后面在介绍artTo()
时会涉及到正切相关的知识。下图可以说明,正切和圆以及圆弧之间的关系,看上去一点复杂,但不用急于求成,后面会慢慢懂的:
有了这些基础,我们就可以开始学习在Canvas中怎么画圆和圆弧了。这也是这篇文章真正的主题,如果你等不及了,那继续往后阅读。
arc()方法
先来看arc()
方法怎么绘制圆和圆弧。Canvas中的arc()
方法接受六个参数:
arc(x, y, radius, startRad, endRad, [anticlockwise]);
在Canvas画布上绘制以坐标点(x,y)
为圆心、半么为radius
的圆上的一段弧线。这段弧线的起始弧度是startRad
,结束弧度是endRad
。这里的弧度是以x
轴正方向为基准、进行顺时针旋转的角度来计算。其中anticlockwise
表示arc()
绘制圆或圆弧是以顺时针还是逆时针方向开始绘制。如果其值为true
表示逆时针,如果是false
表示为顺时针。该参数是一个可选参数,如果没有显式设置,其值是false
(也是anticlockwise
的默认值)。
记得当初我们学数
如需转载,烦请注明出处:https://www.w3cplus.com/canvas/drawing-arc-and-circle.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!