画布元素 - 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, height
ctx.fillRect(50, 50, 200, 100);

在上述代码中，我们首先将 fillStyle 设置为红色，然后使用 fillRect() 方法绘制一个左上角坐标为 (50, 50)，宽度为 200 像素，高度为 100 像素的填充矩形。

绘制填充圆形

// 设置填充颜色为蓝色
ctx.fillStyle = 'blue';
// 开始一个新的路径
ctx.beginPath();
// 绘制一个圆形，参数分别为 x, y, radius, startAngle, endAngle
ctx.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 文件，即可看到绘制的图形效果。