画布元素 - 2D 绘图 - 绘制线条图形

在前端开发中，HTML5 的 <canvas> 元素为我们提供了强大的绘图功能。通过它，我们可以在网页上动态地绘制各种图形，其中绘制线条图形是基础且实用的操作。本文将详细介绍如何使用 <canvas> 元素进行 2D 绘图来绘制线条图形。

1. `<canvas>` 元素简介

<canvas> 是 HTML5 新增的元素，用于在网页上绘制图形。它就像是一块画布，我们可以使用 JavaScript 在上面进行各种绘图操作。基本的 <canvas> 元素代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Example</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300"></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 绘图上下文 ctx，后续的绘图操作都将基于这个上下文进行。

2. 绘制直线

绘制直线是最基本的线条图形绘制操作。使用 beginPath() 方法开始一个新的路径，moveTo() 方法设置起点，lineTo() 方法设置终点，最后使用 stroke() 方法绘制线条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw Line</title>
</head>
<body>
    <canvas id="lineCanvas" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById('lineCanvas');
        const ctx = canvas.getContext('2d');
        // 开始新路径
        ctx.beginPath();
        // 设置起点
        ctx.moveTo(50, 50);
        // 设置终点
        ctx.lineTo(350, 50);
        // 绘制线条
        ctx.stroke();
    </script>
</body>
</html>

在这个例子中，我们从坐标 (50, 50) 开始，绘制一条到坐标 (350, 50) 的水平直线。

3. 绘制折线

绘制折线就是连续调用 lineTo() 方法来连接多个点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw Polyline</title>
</head>
<body>
    <canvas id="polylineCanvas" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById('polylineCanvas');
        const ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.lineTo(150, 200);
        ctx.lineTo(250, 100);
        ctx.lineTo(350, 200);
        ctx.stroke();
    </script>
</body>
</html>

在上述代码中，我们通过多次调用 lineTo() 方法，绘制了一条由多个线段组成的折线。

4. 绘制矩形

绘制矩形有两种方法：使用 strokeRect() 方法绘制矩形边框，使用 fillRect() 方法绘制填充矩形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw Rectangle</title>
</head>
<body>
    <canvas id="rectCanvas" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById('rectCanvas');
        const ctx = canvas.getContext('2d');
        // 绘制矩形边框
        ctx.strokeRect(50, 50, 200, 150);
        // 绘制填充矩形
        ctx.fillStyle = 'blue';
        ctx.fillRect(260, 50, 100, 150);
    </script>
</body>
</html>

在这个例子中，strokeRect(x, y, width, height) 方法用于绘制一个左上角坐标为 (x, y)，宽度为 width，高度为 height 的矩形边框。fillRect() 方法同理，只是绘制的是填充矩形，通过 fillStyle 属性可以设置填充颜色。

5. 总结

绘图操作	方法	说明
开始新路径	`beginPath()`	开始一个新的绘图路径
设置起点	`moveTo(x, y)`	将绘图起点移动到坐标 `(x, y)`
绘制直线	`lineTo(x, y)`	从当前点绘制一条到坐标 `(x, y)` 的直线
绘制线条	`stroke()`	绘制当前路径的线条
绘制矩形边框	`strokeRect(x, y, width, height)`	绘制一个左上角坐标为 `(x, y)`，宽度为 `width`，高度为 `height` 的矩形边框
绘制填充矩形	`fillRect(x, y, width, height)`	绘制一个左上角坐标为 `(x, y)`，宽度为 `width`，高度为 `height` 的填充矩形

通过以上介绍，我们可以看到使用 HTML5 的 <canvas> 元素进行 2D 绘图来绘制线条图形是非常简单和灵活的。掌握这些基本的绘图操作，我们就可以在网页上创建出各种有趣的图形和动画效果。

画布元素 - 2D 绘图 - 绘制线条图形