前面给大家讲解了怎么绘制矩形和线条,接下来将讲解下如何在 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();