了解几个绘制基本图形的 API
Canvas 是 HTML5 提供的绘画 API，可以用于在 Web 页面上绘制各种基本图形。本文介绍一些 Canvas 绘制基本图形的 API：
前置条件
注意：本文章所提供的代码示例默认已经进行了
canvas元素定义，DOM获取以及canvas的上下文获取，以下进行代码演示时将会省略这部分代码，请注意！
<canvas id="myCanvas" width="800" height="200"></canvas>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
1. 绘制直线
API说明
-
moveTo(x, y)：将画笔移动到指定位置(x, y)。该方法定义了直线的起点。 -
lineTo(x, y)：从当前位置绘制一条直线到指定位置(x, y)。该方法定义了直线的终点。 -
stroke()：描边当前路径。该方法实际绘制了直线。
基本步骤
-
设置直线起始点坐标
（x,y）和终点坐标（x,y） -
开始绘制直线
beginPath()、moveTo()、lineTo() -
设置线条样式
lineWidth、strokeStyle等 -
绘制直线
stroke()
代码示例
// 设置直线起始点坐标和终点坐标
var startX = 100;
var startY = 100;
var endX = 700;
var endY = 100;
// 开始绘制直线
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.lineTo(endX, endY);
// 设置线条样式
ctx.lineWidth = 2; // 线宽
ctx.strokeStyle = "red"; // 线条颜色
// 绘制直线
ctx.stroke();
2. 绘制曲线
API说明
-
moveTo(x, y)：将画笔移动到指定位置(x, y)。该方法定义曲线的起点。 -
quadraticCurveTo(cpx, cpy, x, y)：绘制二次贝塞尔曲线，从当前位置到(x, y)，控制点为(cpx, cpy)。该方法通过控制点来定义曲线的弯曲程度。 -
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：绘制三次贝塞尔曲线，从当前位置到(x, y)，两个控制点分别为(cp1x, cp1y)和(cp2x, cp2y)。该方法通过两个控制点来定义曲线的弯曲程度。 -
stroke()：描边当前路径。该方法实际绘制了曲线。
绘制曲线和绘制直线十分类似，区别在于quadraticCurveTo()，它是 Canvas 2D API 提供的方法之一，用于绘制二次贝塞尔曲线。二次贝塞尔曲线由起点、控制点和终点组成，它的形状由控制点的位置和两个端点的相对位置关系决定。下面是一个使用 quadraticCurveTo() 方法绘制二次贝塞尔曲线的示例：
代码示例
// 设置曲线起始点坐标
var startX = 50;
var startY = 50;
// 控制点的坐标
var controlX = 250;
var controlY = 250;
// 终点的坐标
var endX = 700;
var endY = 50;
// 开始绘制曲线
ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(controlX, controlY, endX, endY);
// 设置线条样式
ctx.lineWidth = 2; // 线宽
ctx.strokeStyle = "red"; // 线条颜色
// 绘制曲线
ctx.stroke();
3. 绘制路径
API说明
-
beginPath(): 开始一个新的路径。当调用该方法后，所有之后的路径绘制操作都会被作为一个新的路径进行处理。 -
closePath(): 结束当前路径。通过连接路径的起点和最后一个点来闭合路径。 -
moveTo(x, y): 将路径的起点移动到指定的坐标。将绘图游标移动到给定的位置(x, y)，不会绘制图形。 -
lineTo(x, y): 添加一条直线段到路径。从当前点绘制一条直线到指定的坐标(x, y)。 -
rect(x, y, width, height): 绘制矩形路径。在指定的位置(x, y)绘制一个宽为width，高为height的矩形路径。
代码示例
// 定义路径的各个点
var pathPoints = [
{ x: 50, y: 50 },
{ x: 150, y: 150 },
{ x: 600, y: 50 },
{ x: 700, y: 150 },
];
// 开始绘制路径
ctx.beginPath();
ctx.moveTo(pathPoints[0].x, pathPoints[0].y);
// 绘制路径线条
for (var i = 1; i < pathPoints.length; i++) {
ctx.lineTo(pathPoints[i].x, pathPoints[i].y);
}
// 设置线条样式
ctx.lineWidth = 2; // 线宽
ctx.strokeStyle = "red"; // 线条颜色
// 封闭路径（可选）
ctx.closePath();
// 绘制路径
ctx.stroke();
4. 绘制矩形
API说明
-
fillRect(x, y, width, height): 绘制实心矩形。在指定的位置(x, y)绘制一个宽为width，高为height的实心矩形。 -
strokeRect(x, y, width, height): 绘制矩形的边框。在指定的位置(x, y)绘制一个宽为width，高为height的矩形的边框。 -
clearRect(x, y, width, height): 清除矩形区域。在指定的位置(x, y)清除一个宽为width，高为height的矩形区域。
使用 Canvas 绘制矩形（填充矩形、圆角矩形）的步骤如下：
-
清空画布（可选）：
ctx.clearRect(0, 0, canvas.width, canvas.height);
-
绘制填充矩形：
var x = 200,
y = 50,
width = 400,
height = 100;
ctx.fillStyle = "red"; // 设置填充颜色
ctx.fillRect(x, y, width, height); // 绘制矩形，参数为起始点的坐标和矩形的宽高
-
绘制圆角矩形：
代码示例
// 绘制圆角矩形
function drawRoundRect(x, y, width, height, radius) {
ctx.beginPath();
// 绘制左上角的圆弧路径
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.arcTo(x + width, y, x + width, y + radius, radius);
// 绘制右上角的圆弧路径
ctx.lineTo(x + width, y + height - radius);
ctx.arcTo(
x + width,
y + height,
x + width - radius,
y + height,
radius
);
// 绘制右下角的圆弧路径
ctx.lineTo(x + radius, y + height);
ctx.arcTo(x, y + height, x, y + height - radius, radius);
// 绘制左下角的圆弧路径
ctx.lineTo(x, y + radius);
ctx.arcTo(x, y, x + radius, y, radius);
ctx.closePath();
// 填充圆角矩形
ctx.fillStyle = "green";
ctx.fill();
}
drawRoundRect(200, 50, 400, 100, 50);
在上述代码中，我们首先定义了一个 drawRoundRect 函数，该函数根据参数绘制圆角矩形图形。
其中，我们使用了 arcTo 方法绘制圆角路径，通过调用 moveTo 方法移动到圆角的起点位置，然后使用 lineTo 方法绘制至下一个点位置，最后使用 arcTo 方法绘制圆角路径。圆角的大小由 radius 参数决定。
绘制完四个圆角路径后，调用 closePath 方法将路径封闭起来。最后通过设置 fillStyle 属性设置填充颜色，并调用 fill 方法填充圆角矩形。
在 <body> 中的 drawRoundRect(50, 50, 300, 100, 50) 调用会在画布上绘制一个起点位置为 (200, 50)，宽度为 400，高度为 100，圆角半径为 50 的圆角矩形。
5. 绘制圆和弧
API说明
-
arc(x, y, radius, startAngle, endAngle, anticlockwise): 绘制弧形或部分圆。在指定的位置(x, y)绘制一个半径为radius的弧形或者部分圆。startAngle和endAngle参数用于指定起始角度和结束角度（单位：弧度），anticlockwise参数可选择是否逆时针绘制，默认为false（顺时针）。 -
arcTo(x1, y1, x2, y2, radius): 绘制两个切线之间的弧线。绘制从当前点到（x2, y2）的直线，并在此间以给定半径radius绘制出从当前点开始的切线。
代码示例
-
绘制圆：
// 设置圆的中心点坐标和半径
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 80;
// 开始绘制路径
ctx.beginPath();
// 绘制圆
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
// 设置圆的边框样式
ctx.strokeStyle = "black";
// 设置圆的填充颜色
ctx.fillStyle = "green";
// 填充圆
ctx.fill();
// 绘制圆的边框
ctx.stroke();
// 结束绘制路径
ctx.closePath();
以上代码会在画布上绘制一个半径为100px的绿色实心圆，边框为黑色。注意，在绘制圆之前，我们首先通过调用 beginPath() 方法开始一条新的路径，然后用 arc() 方法定义圆的形状，最后调用 fill() 方法填充圆并 stroke() 方法绘制圆的边框。
-
绘制弧：
// 设置弧的中心点坐标、半径、起始角度和结束角度（以弧度为单位）
var centerX = 400;
var centerY = 50;
var radius = 100;
var startAngle = Math.PI / 4; // 45度
var endAngle = (3 * Math.PI) / 4; // 135度
var counterclockwise = false; // 是否顺时针绘制弧形
// 开始绘制路径
ctx.beginPath();
// 绘制弧形
ctx.arc(centerX, centerY, radius, startAngle, endAngle, counterclockwise);
// 设置弧形的边框样式
ctx.strokeStyle = "red";
// 设置弧形的线宽
ctx.lineWidth = 5;
// 绘制弧形的边框
ctx.stroke();
// 结束绘制路径
ctx.closePath();
以上代码会绘制一个半径为100px的弧形，起始角度为45度，结束角度为135度，顺时针绘制，并设定边框样式为红色，线宽为5像素。注意，在绘制弧形之前，我们同样先通过调用 beginPath() 方法开始一条新的路径，然后使用 arc() 方法定义弧形的形状，arc()方法接受的参数依次是圆心的 x 坐标、y 坐标、半径、起始角度、终止角度。起始角度和终止角度都是弧度制表示，可以使用Math.PI来得到常用的角度值。最后调用 stroke() 方法绘制弧形的边框。
6. 绘制文本
API说明
-
fillText(text, x, y, maxWidth): 在指定位置绘制填充文本。在指定的位置(x, y)绘制给定的文本内容text。可选参数maxWidth用于指定文本的最大宽度，文本会在达到最大宽度后自动换行。 -
strokeText(text, x, y, maxWidth): 在指定位置绘制边框文本。在指定的位置(x, y)绘制给定的文本内容text的边框。可选参数maxWidth用于指定文本的最大宽度，文本会在达到最大宽度后自动换行。 -
measureText(text): 测量文本的宽度。返回一个 TextMetrics 对象，该对象包含文本的宽度和其他相关信息。可以使用measureText(text).width来获取文本的宽度。 -
font = value: 设置文本的字体样式。通过给font赋值来设置文本的字体样式，例如：ctx.font = "bold 12px Arial"; -
textAlign = value: 设置文本的水平对齐方式。通过给textAlign赋值来设置文本的水平对齐方式，可选值有"start","end","left","right","center"等。 -
textBaseline = value: 设置文本的垂直对齐方式。通过给textBaseline赋值来设置文本的垂直对齐方式，可选值有"top","hanging","middle","alphabetic","ideographic","bottom"等。
代码示例
// 设置文本样式
ctx.font = "bold 50px Arial"; // 设置文本粗细、大小及字体
ctx.fillStyle = "red"; // 设置文本颜色
ctx.textAlign = "center"; // 设置文本对齐方式：center（居中对齐）
ctx.textBaseline = "middle"; // 设置文本基线：middle（垂直居中）
// 绘制文本
ctx.fillText("Hello, Canvas!", canvas.width / 2, canvas.height / 2);
上述代码会在画布上绘制文本。我们使用 font 属性来设置文本的粗细、大小和字体，使用 fillStyle 属性来设置文本颜色，使用 textAlign 属性来设置文本对齐方式，使用 textBaseline 属性设置文本基线，
然后，我们使用 fillText() 方法来绘制文本，通过指定文本内容、位置（x坐标和y坐标）来实现。在上述代码中，我们将文本设置为"Hello, Canvas!"，并将其绘制在画布的中心位置。注意使用的是 fillText() 方法来填充文本，如果希望绘制的是文本的边框，可以使用 strokeText() 方法，并在绘制文本之前设置 strokeStyle 属性。
总结
本文主要介绍了绘制基本图形的几个常用的 API 及示例，目的就是要对 Canvas 绘图 API 有一个基本的认识，图形绘制是 Canvas 的基础，是 Canvas 最简单的功能，只有基础打牢，后面我们使用 Canvas 开发图表可视化、动画、游戏等高级项目时，我们才会更快的学习。
本文主要讲解了绘制简单图形的基本操作：包括绘制直线、曲线、路径、圆弧、文本等，以下是在绘制这几种的图形的常用 API，总结一下：
-
绘制直线：
-
moveTo(x, y)：将画笔移动到指定位置(x, y)。 -
lineTo(x, y)：从当前位置绘制一条直线到指定位置(x, y)。
-
-
绘制矩形：
-
fillRect(x, y, width, height)：绘制一个填充的矩形，起点为(x, y)，宽度为width，高度为height。 -
strokeRect(x, y, width, height)：绘制一个边框的矩形，起点为(x, y)，宽度为width，高度为height。
-
-
绘制路径：
-
fillRect(x, y, width, height)：绘制一个填充的矩形，起点为(x, y)，宽度为width，高度为height。 -
strokeRect(x, y, width, height)：绘制一个边框的矩形，起点为(x, y)，宽度为width，高度为height。
-
-
绘制圆形、弧形：
-
arc(x, y, radius, startAngle, endAngle, anticlockwise)：从起点(x, y)开始，以半径radius绘制一段弧线，从startAngle角度开始，到endAngle角度结束（以弧度为单位）。 -
arcTo(x1, y1, x2, y2, radius)：绘制一段连接两个切线的弧线，其中(x1, y1)和(x2, y2)是切线的起点和终点，radius是弧线的半径。
-
-
绘制文本
-
fillText(text, x, y, maxWidth): 在指定位置绘制填充文本。在指定的位置(x, y)绘制给定的文本内容text。 -
strokeText(text, x, y, maxWidth): 在指定位置绘制边框文本。在指定的位置(x, y)绘制给定的文本内容text的边框。 -
font = value: 设置文本的字体样式。例如：ctx.font = "bold 12px Arial";
-
希望本文能为你在初学 Canvas 绘图时，给你提供一些帮助！加油！
