画布元素-2D绘图-绘制矩形图形-前端-HTML5-书闪BookChips

103 - 画布元素 - 2D 绘图 - 绘制矩形图形

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:19:13

前端 - HTML5 《画布元素 - 2D 绘图 - 绘制矩形图形》

在前端开发中，HTML5 的 <canvas> 元素为我们提供了强大的绘图功能。其中，绘制矩形图形是最基础也是最常用的操作之一。本文将详细介绍如何使用 <canvas> 元素进行 2D 绘图，重点讲解绘制矩形图形的方法。

1. `<canvas>` 元素简介

<canvas> 是 HTML5 新增的一个元素，用于在网页上创建一个画布，我们可以通过 JavaScript 在这个画布上进行图形绘制、动画制作等操作。使用 <canvas> 元素时，需要指定其宽度和高度，例如：

<canvas id="myCanvas" width="400" height="300"></canvas>

2. 获取 2D 绘图上下文

要在 <canvas> 上进行绘图，首先需要获取 2D 绘图上下文。可以通过以下 JavaScript 代码实现：

// 获取 canvas 元素
const canvas = document.getElementById('myCanvas');
// 获取 2D 绘图上下文
const ctx = canvas.getContext('2d');

3. 绘制矩形图形的方法

3.1 绘制填充矩形 - `fillRect()`

fillRect(x, y, width, height) 方法用于绘制一个填充的矩形。其中，x 和 y 是矩形左上角的坐标，width 和 height 分别是矩形的宽度和高度。

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

在上述代码中，我们首先设置了填充颜色为蓝色，然后在画布上绘制了一个左上角坐标为 (50, 50)，宽度为 200，高度为 150 的填充矩形。

3.2 绘制描边矩形 - `strokeRect()`

strokeRect(x, y, width, height) 方法用于绘制一个描边的矩形。参数含义与 fillRect() 相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制描边矩形</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        // 设置描边颜色
        ctx.strokeStyle = 'red';
        // 设置描边宽度
        ctx.lineWidth = 5;
        // 绘制描边矩形
        ctx.strokeRect(50, 50, 200, 150);
    </script>
</body>
</html>

在这个例子中，我们设置了描边颜色为红色，描边宽度为 5，然后绘制了一个描边矩形。

3.3 清除矩形区域 - `clearRect()`

clearRect(x, y, width, height) 方法用于清除指定矩形区域内的绘图内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除矩形区域</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');
        // 绘制填充矩形
        ctx.fillStyle = 'green';
        ctx.fillRect(50, 50, 200, 150);
        // 清除部分区域
        ctx.clearRect(100, 100, 100, 50);
    </script>
</body>
</html>

在上述代码中，我们先绘制了一个绿色的填充矩形，然后清除了矩形内的一部分区域。

4. 总结

方法	描述	参数
`fillRect(x, y, width, height)`	绘制填充矩形	`x` 和 `y`：矩形左上角坐标；`width` 和 `height`：矩形的宽度和高度
`strokeRect(x, y, width, height)`	绘制描边矩形	同 `fillRect()`
`clearRect(x, y, width, height)`	清除指定矩形区域的绘图内容	同 `fillRect()`

通过以上方法，我们可以在 HTML5 的 <canvas> 元素上轻松地绘制和操作矩形图形。这些基础操作是进行更复杂绘图和动画制作的基石，希望本文能帮助你更好地掌握 HTML5 画布的 2D 绘图技巧。

103 - 画布元素 - 2D 绘图 - 绘制矩形图形

前端 - HTML5 《画布元素 - 2D 绘图 - 绘制矩形图形》

1. <canvas> 元素简介