canvas绘制四分之一圆_Canvas学习：绘制圆和圆弧

圆和圆弧是图形中基本图形之一，今天我们来了解在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的默认值)。

记得当初我们学数