Canvas艺术之旅：了解几个绘制基本图形的 API
了解几个绘制基本图形的 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 绘图时，给你提供一些帮助！加油！