画布元素-2D绘图-绘制路径与闭合路径-前端-HTML5-书闪BookChips

111 - 画布元素 - 2D 绘图 - 绘制路径与闭合路径

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:23:32

画布元素 - 2D 绘图 - 绘制路径与闭合路径

在 HTML5 中，<canvas> 元素为我们提供了强大的绘图功能，通过 JavaScript 可以在画布上创建各种复杂的图形。本文将深入探讨如何在 <canvas> 上绘制路径以及闭合路径。

1. 画布基础

在开始绘制路径之前，我们需要先了解如何创建和初始化一个 <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 Drawing</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        // 获取 canvas 元素
        const canvas = document.getElementById('myCanvas');
        // 获取 2D 绘图上下文
        const ctx = canvas.getContext('2d');
    </script>
</body>
</html>

在上述代码中，我们首先创建了一个 <canvas> 元素，并为其指定了 id、width 和 height 属性。然后，通过 document.getElementById 方法获取该元素，并使用 getContext('2d') 方法获取 2D 绘图上下文，后续的绘图操作都将基于这个上下文进行。

2. 绘制路径

路径是由一系列的点和线组成的图形轮廓。在 <canvas> 上绘制路径通常需要以下几个步骤：

开始路径：使用 beginPath() 方法开始一个新的路径。
移动画笔：使用 moveTo(x, y) 方法将画笔移动到指定的坐标位置。
绘制线条：使用 lineTo(x, y) 方法从当前位置绘制一条直线到指定的坐标位置。
绘制其他图形：除了直线，还可以使用 arc() 方法绘制弧线、bezierCurveTo() 方法绘制贝塞尔曲线等。
结束路径：使用 closePath() 方法闭合路径（可选）。
绘制路径：使用 stroke() 方法绘制路径的轮廓，或使用 fill() 方法填充路径内部。

以下是一个绘制三角形的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Drawing</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        // 开始路径
        ctx.beginPath();
        // 移动画笔到起始点
        ctx.moveTo(200, 50);
        // 绘制第一条边
        ctx.lineTo(250, 150);
        // 绘制第二条边
        ctx.lineTo(150, 150);
        // 闭合路径
        ctx.closePath();
        // 绘制路径轮廓
        ctx.stroke();
    </script>
</body>
</html>

在上述代码中，我们首先调用 beginPath() 方法开始一个新的路径，然后使用 moveTo() 方法将画笔移动到起始点 (200, 50)。接着，使用 lineTo() 方法绘制了两条边，最后调用 closePath() 方法闭合路径，并使用 stroke() 方法绘制路径的轮廓。

3. 闭合路径

闭合路径是指将路径的起点和终点连接起来，形成一个封闭的图形。在 <canvas> 上闭合路径可以使用 closePath() 方法。当调用 closePath() 方法时，画布会自动从当前位置绘制一条直线到路径的起始点，从而闭合路径。

以下是一个闭合路径的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Drawing</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        // 开始路径
        ctx.beginPath();
        // 移动画笔到起始点
        ctx.moveTo(200, 50);
        // 绘制第一条边
        ctx.lineTo(250, 150);
        // 绘制第二条边
        ctx.lineTo(150, 150);
        // 闭合路径
        ctx.closePath();
        // 填充路径内部
        ctx.fillStyle = 'blue';
        ctx.fill();
    </script>
</body>
</html>

在上述代码中，我们在绘制完三角形的两条边后调用了 closePath() 方法闭合路径，然后使用 fill() 方法填充路径内部。由于路径已经闭合，所以填充操作会将整个三角形内部填充为蓝色。

4. 总结

通过掌握这些方法，我们可以在 <canvas> 上绘制出各种复杂的图形。希望本文对你理解 HTML5 画布的绘制路径和闭合路径有所帮助。