文章目录

• 参考
• 描述
• 模板
• 圆形
• • • 圆形
    • 半圆形
    • 互补
• 弧形
• • • arc()
    • arcTo()
• 二次贝塞尔曲线
• 三次贝塞尔曲线

参考

描述

模板

如需运行示例，请将后续示例代码插入此处（为使文章更为精简，后续示例中将只给出 JavaScript 代码）。

圆形

圆形

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 为了绘制曲线需要使用 beginPath() 开始一条路径
canvas.beginPath();
// 开始对需要绘制的圆进行描述
canvas.arc(300, 200, 100, 0 * Math.PI/180, 360 * Math.PI/180);
// 关闭路径
canvas.closePath();
// 开始对圆进行绘制（描边）
canvas.stroke();

效果：

注：

1. canvas.arc()

arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean)

2. Math.PI 即圆周率，该弧度值对应角度 180°。因此我们可以使用 Math.PI/180 将弧度转换为我们平常使用的 °。

半圆形

为了绘制半圆形，我们仅需将 canvas.arc() 函数的第四个参数修改为 180 * Math.PI/180 即可。

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 为了绘制曲线需要使用 beginPath() 开始一条路径
canvas.beginPath();
// 开始对需要绘制的圆进行描述
canvas.arc(300, 200, 100, 180 * Math.PI/180, 360 * Math.PI/180);
// 关闭路径
canvas.closePath();
// 开始对圆进行绘制
canvas.stroke();

效果：

互补

通过修改 arc() 函数的最后一个参数我们可以获得一个可以与当前图形互补成圆形的图形。

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 为了绘制曲线需要使用 beginPath() 开始一条路径
canvas.beginPath();
// 开始对需要绘制的圆进行描述
canvas.arc(300, 200, 100, 30 * Math.PI/180, 250 * Math.PI/180);
// 关闭路径
canvas.closePath();
// 使用 strokeStyle 设置描边时使用的画笔颜色
canvas.strokeStyle = "pink";
// 开始对被描述的圆进行绘制
canvas.stroke();// 绘制与上一个图形互补成圆形的图形
canvas.beginPath();
canvas.arc(300, 200, 100, 30 * Math.PI/180, 250 * Math.PI/180, true);
canvas.closePath();
// 使用 fillStyle 设置填充时使用的颜色
canvas.fillStyle = 'dodgerblue';
// 开始对被描述的圆进行颜色填充
canvas.fill();

效果：

弧形

arc()

canvas.closePath() 函数会将绘制的图形的首尾进行连接，所以我们仅使用 canvas.beginPath() 即可非闭合曲线（比如弧线）。

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 为了绘制曲线需要使用 beginPath() 开始一条路径
canvas.beginPath();
// 开始对需要绘制的圆进行描述
canvas.arc(300, 200, 100, 20 * Math.PI/180, 200 * Math.PI/180);
// 设置画笔颜色
canvas.strokeStyle = '#f40';
// 开始对圆进行绘制
canvas.stroke();

效果：

arcTo()

arcTo(x1: number, y1: number, x2: number, y2: number, radius: number)

注：

1. 圆弧的起点由 canvas.moveTo() 或 canvas.lineTo() 函数来指定。
2. 图中右下角中的红色方块即为控制点。arcTo() 将绘制一个存在两条切线（由控制点出发到起始点及终止点的两条线组成）的弧线。
   

举个栗子：

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 指定弧线的起点
canvas.moveTo(200, 70);
// 对需要被绘制的弧线进行描述
canvas.arcTo(120, 40, 100, 70, 100);
// 开始对弧线进行描线
canvas.stroke()

效果：

二次贝塞尔曲线

quadraticCurveTo(cpx: number, cpy: number, x: number, y: number)

举个栗子：

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 开始一个路径
canvas.beginPath();
// 指定二次贝塞尔曲线的起点
canvas.lineTo(20, 20);
// 描述二次贝塞尔曲线
canvas.quadraticCurveTo(20, 100, 200, 20);
// 开始绘制曲线
canvas.stroke();

效果：

注：

1. 在使用 beginPath() 后，你需要使用 lineTo() 或 moveTo() 函数为二次贝塞尔曲线指定起点。否则，控制点将作为曲线的起点。例如：

// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 开始一个路径
canvas.beginPath();
// 描述二次贝塞尔曲线
canvas.quadraticCurveTo(20, 100, 200, 20);
// 开始绘制曲线
canvas.stroke();

效果：

2. 二次贝塞尔曲线不是闭合图形，在使用 beginPath() 后，请不要使用 endPath() 函数。否则，Canvas 将不会绘制该图形。

三次贝塞尔曲线

与二次贝塞尔曲线不同的是，三次被塞尔曲线拥有两个控制点。使用三次贝塞尔曲线能够对曲线实现更精细的控制。

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

在下图中，左下角的红色方块代表第一个控制点，右上角的红色方块代表第二个控制点。

举个栗子：

/// 获取 Canvas 元素对应的 DOM 元素
const canvas_e = document.querySelector('#canvas');
// 指定使用 2D Canvas 渲染上下文
const canvas = canvas_e.getContext('2d');
// 开始一条路径
canvas.beginPath();
// 为三次贝塞尔曲线指定起点
canvas.moveTo(50, 50);
// 描述三次贝塞尔曲线
canvas.bezierCurveTo(74, 141, 224, 33, 250, 100);
// 绘制贝塞尔曲线
canvas.stroke();

效果：

、