JavaScript Canvas fillRect() 函数详解：绘制矩形及进阶应用255

在 JavaScript 中，Canvas API 提供了强大的绘图功能，其中fillRect() 方法是绘制填充矩形的基础函数。本文将深入探讨fillRect() 的使用方法、参数详解，以及一些进阶应用技巧，帮助读者掌握 Canvas 绘图的精髓。

fillRect() 方法属于 CanvasRenderingContext2D 对象的一个方法，它允许我们在 Canvas 上绘制一个填充的矩形。其语法非常简洁，易于理解和使用：

(x, y, width, height);

其中：
context: CanvasRenderingContext2D 对象的引用，它是获取 Canvas 绘图上下文的关键。通过('2d') 方法获取。
x: 矩形左上角的 x 坐标（相对于 Canvas 的左上角）。
y: 矩形左上角的 y 坐标（相对于 Canvas 的左上角）。
width: 矩形的宽度。
height: 矩形的高度。

所有坐标和尺寸值都是以像素为单位的。例如，以下代码会在 Canvas 上绘制一个红色填充的 50x100 像素的矩形，其左上角位于 (10, 20) 位置：
const canvas = ('myCanvas');
const ctx = ('2d');
= 'red'; // 设置填充颜色
(10, 20, 50, 100);

这段代码首先获取 Canvas 元素和其 2D 绘图上下文，然后设置填充颜色为红色，最后调用fillRect() 方法绘制矩形。需要注意的是，fillStyle 属性用于设置填充颜色，它可以是颜色名称（例如 'red'、'blue'、'green'）、十六进制颜色值（例如 '#FF0000'），或者 RGBA 颜色值（例如 'rgba(255, 0, 0, 0.5)'）。

进阶应用：

fillRect() 的应用远不止绘制简单的矩形。结合其他的 Canvas 方法，可以实现许多复杂的图形效果：
绘制多个矩形：可以连续调用fillRect() 方法绘制多个矩形，创建复杂的图案。
填充不同颜色：通过修改fillStyle 属性，可以在绘制不同的矩形时使用不同的填充颜色。
结合路径：可以将fillRect() 与beginPath()、moveTo()、lineTo() 等路径绘制方法结合使用，创建更复杂的形状，然后使用fill()方法填充。
动画效果：配合setTimeout() 或requestAnimationFrame() 函数，可以创建动画效果，例如移动、缩放或改变矩形的颜色。
图像处理：可以使用fillRect() 方法作为辅助工具，例如在图像上绘制遮罩或高亮区域。
游戏开发：在游戏开发中，fillRect() 常用于绘制游戏元素，例如砖块、平台或角色。

示例：绘制一个简单的动画矩形：
const canvas = ('myCanvas');
const ctx = ('2d');
let x = 0;
function animate() {
(0, 0, , ); // 清除画布
= 'blue';
(x, 50, 50, 50);
x++;
if (x > ) {
x = 0;
}
requestAnimationFrame(animate);
}
animate();

这段代码演示了一个简单的动画，一个蓝色矩形会不断地从左向右移动。 clearRect() 方法用于清除画布，避免之前的矩形残留。 requestAnimationFrame() 方法用于优化动画性能。

总结：

fillRect() 是 Canvas API 中一个非常实用且基础的绘图函数。通过灵活运用其参数以及结合其他 Canvas 方法，可以创建出各种各样的图形效果，为网页开发和游戏开发提供强大的支持。掌握fillRect() 的使用方法，是学习 Canvas 绘图的关键一步。

希望本文能够帮助读者更好地理解和应用 JavaScript Canvas 的fillRect() 函数。在实际应用中，鼓励读者多实践，不断探索 Canvas API 的更多可能性。

2025-09-17

下一篇：JavaScript 中的 TypeScript 声明文件 (.) 完全指南