- +在此添加单个AI新笔记
画布元素 - 2D 绘图 - 图形的填充与描边
前端 - HTML5 《画布元素 - 2D 绘图 - 图形的填充与描边》
引言
在前端开发中，HTML5 的 <canvas> 元素为我们提供了强大的 2D 绘图能力。通过它，我们可以创建各种复杂的图形和动画。而图形的填充与描边是绘制图形时非常基础且重要的操作，本文将详细介绍如何使用 <canvas> 进行图形的填充与描边。
画布元素基础
首先，我们需要在 HTML 中创建一个 <canvas> 元素。<canvas> 元素就像是一块空白的画布，我们可以在上面进行绘图操作。以下是一个简单的 HTML 结构：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvas 2D 绘图</title></head><body><canvas id="myCanvas" width="400" height="400"></canvas><script src="script.js"></script></body></html>
在上述代码中，我们创建了一个宽度为 400 像素，高度为 400 像素的 <canvas> 元素，并为其设置了一个唯一的 id。接下来，我们将在 JavaScript 文件（script.js）中进行绘图操作。
获取绘图上下文
在 JavaScript 中，我们需要获取 <canvas> 元素的 2D 绘图上下文，才能进行具体的绘图操作。以下是获取上下文的代码：
// 获取 canvas 元素const canvas = document.getElementById('myCanvas');// 获取 2D 绘图上下文const ctx = canvas.getContext('2d');
通过 getContext('2d') 方法，我们得到了一个 2D 绘图上下文对象 ctx，后续的绘图操作都将基于这个对象进行。
图形的填充
填充图形意味着用指定的颜色或样式填满整个图形区域。我们可以使用 fillStyle 属性来设置填充的颜色或样式，然后使用 fill() 方法进行填充。
绘制填充矩形
// 设置填充颜色为红色ctx.fillStyle = 'red';// 绘制一个填充矩形，参数分别为 x, y, width, heightctx.fillRect(50, 50, 200, 100);
在上述代码中，我们首先将 fillStyle 设置为红色，然后使用 fillRect() 方法绘制一个左上角坐标为 (50, 50)，宽度为 200 像素，高度为 100 像素的填充矩形。
绘制填充圆形
// 设置填充颜色为蓝色ctx.fillStyle = 'blue';// 开始一个新的路径ctx.beginPath();// 绘制一个圆形，参数分别为 x, y, radius, startAngle, endAnglectx.arc(200, 200, 50, 0, 2 * Math.PI);// 闭合路径ctx.closePath();// 填充路径ctx.fill();
这里，我们使用 arc() 方法绘制一个圆形，然后使用 fill() 方法进行填充。注意，在绘制圆形之前，需要使用 beginPath() 方法开始一个新的路径，绘制完成后使用 closePath() 方法闭合路径。
图形的描边
描边图形是指在图形的边缘绘制一条线条。我们可以使用 strokeStyle 属性来设置描边的颜色或样式，使用 lineWidth 属性来设置线条的宽度，最后使用 stroke() 方法进行描边。
绘制描边矩形
// 设置描边颜色为绿色ctx.strokeStyle = 'green';// 设置线条宽度为 5 像素ctx.lineWidth = 5;// 绘制一个描边矩形ctx.strokeRect(50, 250, 200, 100);
在这段代码中，我们将 strokeStyle 设置为绿色，lineWidth 设置为 5 像素，然后使用 strokeRect() 方法绘制一个描边矩形。
绘制描边圆形
// 设置描边颜色为紫色ctx.strokeStyle = 'purple';// 设置线条宽度为 3 像素ctx.lineWidth = 3;// 开始一个新的路径ctx.beginPath();// 绘制一个圆形ctx.arc(200, 350, 50, 0, 2 * Math.PI);// 闭合路径ctx.closePath();// 描边路径ctx.stroke();
同样，在绘制圆形时，需要先开始一个新的路径，绘制完成后闭合路径，最后使用 stroke() 方法进行描边。
填充与描边结合
我们还可以将填充和描边操作结合起来，为图形同时添加填充颜色和描边。
// 设置填充颜色为黄色ctx.fillStyle = 'yellow';// 设置描边颜色为黑色ctx.strokeStyle = 'black';// 设置线条宽度为 2 像素ctx.lineWidth = 2;// 开始一个新的路径ctx.beginPath();// 绘制一个三角形ctx.moveTo(50, 300);ctx.lineTo(150, 200);ctx.lineTo(250, 300);ctx.closePath();// 填充路径ctx.fill();// 描边路径ctx.stroke();
在上述代码中，我们绘制了一个黄色填充、黑色描边的三角形。
总结
| 操作 | 属性/方法 | 描述 |
|---|---|---|
| 填充颜色 | fillStyle |
设置填充的颜色或样式 |
| 填充图形 | fill() |
用指定的填充样式填充当前路径 |
| 描边颜色 | strokeStyle |
设置描边的颜色或样式 |
| 线条宽度 | lineWidth |
设置描边线条的宽度 |
| 描边图形 | stroke() |
用指定的描边样式绘制当前路径 |
通过本文的介绍，你已经了解了如何使用 HTML5 的 <canvas> 元素进行 2D 绘图中的图形填充与描边操作。这些基础操作是创建更复杂图形和动画的基石，希望你能在实际项目中灵活运用。
以上代码可以将 HTML 文件和 JavaScript 文件保存为相应的 .html 和 .js 文件，然后在浏览器中打开 HTML 文件，即可看到绘制的图形效果。