canvas 绘制圆弧

前面给大家讲解了怎么绘制矩形和线条，接下来将讲解下如何在 canvas 画布上 绘制圆弧和圆形。

相对矩形来说，绘制圆弧则更为复杂。绘制圆弧需要确定圆心的坐标，圆弧的角度以及绘制圆弧的绘制方法等等。

context.arc()

在 Canvas 中我们可以使用 context.arc() 的方法来创建圆弧路径。简单来说，在 Canvas 中，创建一条圆弧路径是从与圆心(x, y)距离为一个半径且角度为开始角度的位置开始，最后停在离圆心(x, y)距离为一个半径且角度为结束角度的位置上。

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

参数说明：

• x: 圆的中心的 x 坐标
• y: 圆的中心的 y 坐标
• radius: 圆的半径
• startAngle: 圆弧的开始角度
• endAngle: 圆弧的结束角度
• anticlockwise: 可选的参数，规定应该逆时针还是顺时针绘图，默认值为 false

弧度表示角度

这里需要注意的是，在 Canvas 中表示圆弧的开始角度和结束角度都是以弧度来表示的，而不是使用角度来表示。

举个例子: 360度使用弧度来表示则是 2π (pi 的两倍) 弧度。

我们可以通过下面的公式进行换算。

var degree = 1; // 表示 1°
var radians = degree * (Math.PI / 180); // 0.0175弧度

绘制圆弧路径

接下来让我们尝试绘制一个圆弧，如下图：

具体代码如下：

// 开始创建新路径
context.beginPath();
// 创建一个半圆圆弧
context.arc(250, 250, 200, 0, Math.PI, false);
// 调用 stroke 绘制该路径
context.stroke();

绘制部分圆

接下来让我们尝试绘制一个部分圆形填充图形，如下图：

// 开始创建新路径
context.beginPath();
// 创建一个圆弧
context.arc(250, 250, 200, 0, 0.75 * Math.PI, false);
// 填充该圆弧
context.fill();

绘制圆形

圆形实际上是由圆弧组成（首尾相连的圆弧便是圆形）,如果我们需要绘制下面的圆形：

具体代码如下：

// 开始创建新路径
context.beginPath();
// 设置开始角度为0，结束角度为 2π 弧度
context.arc(250, 250, 200, 0, 2 * Math.PI, false);
// 使用 fill 自动闭合圆弧路径，然后填充圆弧区域
context.fill();

绘制圆角矩形

我们不仅可以使用 context.arc() 来绘制圆弧和圆形，我们还可以来绘制圆角矩形上的圆角。如下图为我们需要绘制一个圆角矩形：

var x = 120; // 圆角矩形左上角横坐标
var y = 120; // 圆角矩形左上角纵坐标
var width = 250; // 圆角矩形的宽度
var height = 250; // 圆角矩形的高度
var radius = 50; // 圆角的半径

// 开始创建新路径
context.beginPath();
// 绘制左上角圆角
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2);
// 绘制顶边路径
context.lineTo(width - radius + x, y);
// 绘制右上角圆角
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2);
// 绘制右边路径
context.lineTo(width + x, height + y - radius);
// 绘制右下角圆角
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI * 1 / 2);
// 绘制底边路径
context.lineTo(radius + x, height +y);
// 绘制左下角圆角
context.arc(radius + x, height - radius + y, radius, Math.PI * 1 / 2, Math.PI);
// 闭合路径 也可使用 context.lineTo(x, y + radius);
context.closePath();
// 设置绘制的颜色
context.strokeStyle = '#188eee';
context.stroke();