你好！作为前端开发者，我们经常需要在网页上实现动态的图形绘制功能。HTML5 的 INLINECODE7692e8d1 元素就像一块空白的画布，给予了我们无限的创作空间，而 INLINECODE1be1aa79 API 中的 fillRect() 方法则是我们在这块画布上挥洒创意的第一步，也是最基础、最重要的一块基石。
在这篇文章中，我们将深入探讨 HTML Canvas 的 fillRect() 方法。你将不仅学会如何使用它绘制简单的矩形，还会深入了解其背后的坐标系统、颜色填充机制，以及如何在实际项目中高效地运用这一方法。无论你是刚开始学习 Canvas 的新手，还是希望巩固基础知识的开发者，这篇文章都将为你提供实用的见解和最佳实践。
初识 fillRect()：画布上的“填充”艺术
在开始敲代码之前，我们需要理解 INLINECODEa7f18afc 到底做了什么。简单来说，INLINECODE03eb4cb2 是 Canvas 2D 上下文的一个方法，用于在画布上绘制一个填充了颜色的矩形。这听起来可能很简单，但它是构建复杂图形、图表甚至游戏界面的基本单元。
与 INLINECODEa2741261（仅描边）或 INLINECODE232a1e43（仅创建路径）不同，fillRect() 是一个“即发即忘”的方法——它会立即绘制像素并修改画布状态，而不仅仅是创建一个待渲染的路径对象。
#### 语法解析
让我们先来看一下它的标准语法。为了使用这个方法，我们需要先获取 canvas 元素的 2D 渲染上下文。
// 1. 获取 canvas 元素
const canvas = document.getElementById(‘myCanvas‘);
// 2. 获取 2D 绘图上下文
const ctx = canvas.getContext(‘2d‘);
// 3. 调用 fillRect 方法
ctx.fillRect(x, y, width, height);
正如你所见，这个方法接受四个参数，它们决定了矩形在画布上的位置和大小：
-
x(X坐标): 矩形左上角在画布上的水平坐标。这是一个以像素为单位的值。需要注意的是，坐标原点 (0,0) 通常位于画布的左上角。 -
y(Y坐标): 矩形左上角在画布上的垂直坐标。数值越大，位置越靠下。 -
width(宽度): 矩形的宽度，单位也是像素。 -
height(高度): 矩形的高度，单位也是像素。
#### 默认行为与填充颜色
一个容易被新手忽视的细节是：fillRect() 方法本身并不包含颜色参数。那么，它用什么颜色填充呢？
答案是：它使用当前上下文中的 fillStyle 属性值。
- 默认颜色: 如果我们没有显式地设置 INLINECODE948ac79e，其默认值是纯黑色（INLINECODE44c89339）。这意味着，如果你刚拿到上下文就直接调用
fillRect()，你会得到一个黑色的矩形。
代码实战：从基础示例开始
为了让你更直观地理解，让我们动手写几个例子。我们将从最基本的默认颜色绘制开始，逐步过渡到自定义颜色和更复杂的场景。
#### 示例 1：使用默认颜色绘制
在这个例子中，我们创建一个画布，并直接绘制一个矩形，看看默认的黑色效果。
Canvas fillRect 基础示例
body { margin: 20px; font-family: sans-serif; }
/* 给 canvas 加个边框，方便我们看到边界 */
canvas { border: 1px solid #333; background-color: #f0f0f0; }
示例 1：默认黑色填充
// 获取 canvas 元素及其 2D 上下文
var canvas = document.getElementById("canvasDemo");
var ctx = canvas.getContext("2d");
// 此时 fillStyle 默认为 black (#000000)
// 在坐标 (50, 50) 处绘制一个宽 350 高 200 的矩形
ctx.fillRect(50, 50, 350, 200);
代码分析：
在上面的代码中，我们并没有设置 INLINECODEfa67c18c。你可以把 INLINECODEd2e99316 想象成一只画笔，当我们拿到它时，这只画笔默认蘸的是黑色墨水。fillRect(50, 50, 350, 200) 告诉浏览器：从画布左边 50px、上边 50px 的位置开始，向右画 350px，向下画 200px，然后用当前画笔的颜色填满这个区域。
#### 示例 2：自定义填充颜色
大多数情况下，我们并不想要黑色的矩形。让我们看看如何改变颜色，并理解状态保持的概念。
Canvas fillRect 自定义颜色
body { margin: 20px; }
canvas { border: 1px solid #ccc; }
示例 2：绿色填充
var canvas = document.getElementById("colorCanvas");
var ctx = canvas.getContext("2d");
// 关键步骤：设置填充样式
// fillStyle 接受 CSS 颜色字符串 (如 ‘red‘, ‘#ff0000‘, ‘rgb(255,0,0)‘)
ctx.fillStyle = "green";
// 绘制矩形，此时矩形将变成绿色
ctx.fillRect(50, 50, 350, 200);
深入理解 fillStyle：
你需要注意一点，INLINECODEe40f8b45 是一种状态。一旦你将 INLINECODE8b0262c3 设置为绿色，之后调用的所有 INLINECODEa4681f1c 都将是绿色的，直到你再次修改 INLINECODEcf16c871。这种基于状态的绘图模式是 Canvas API 的核心特征。
进阶应用：构建更丰富的场景
掌握了基础之后，让我们看看在真实开发中我们会如何使用 fillRect()。它很少单独出现，通常与清空画布、绘制背景或网格线等操作结合使用。
#### 实战场景 1：使用 fillRect 实现背景和清空画布
在开发游戏或动画时，我们通常在每一帧都需要重绘画面。fillRect() 是实现“清空画布”或“绘制背景色”最高效的方法。
Canvas 动画背景
body { margin: 0; overflow: hidden; }
canvas { display: block; }
const canvas = document.getElementById("animCanvas");
const ctx = canvas.getContext("2d");
// 设置画布全屏
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener(‘resize‘, resize);
resize();
let offset = 0;
function draw() {
// 1. 使用 fillRect 覆盖整个画布，实现“清空”或“背景绘制”
// 每次绘制前，我们用半透明的深蓝色覆盖，这可以产生拖尾效果！
ctx.fillStyle = ‘rgba(0, 0, 50, 0.2)‘;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 2. 绘制一个移动的矩形
ctx.fillStyle = ‘orange‘;
// 计算动态坐标
const x = (Math.sin(offset) * 0.5 + 0.5) * (canvas.width - 100);
const y = (Math.cos(offset) * 0.5 + 0.5) * (canvas.height - 100);
ctx.fillRect(x, y, 100, 100);
offset += 0.05;
requestAnimationFrame(draw);
}
draw();
见解：在这个例子中，我们展示了 INLINECODEfc736f07 的一个高级技巧：不使用 INLINECODE65c65544 清空画布，而是使用带透明度的 fillRect 覆盖全屏。这会在移动的物体后留下漂亮的轨迹（拖尾效果），这在粒子系统中是非常常见的优化技巧。
#### 实战场景 2：绘制网格系统
很多数据可视化应用都需要网格背景。我们可以用循环结合 fillRect 来画出整齐的网格。
// 假设我们已经获取了 ctx
function drawGrid(ctx, w, h, step) {
ctx.fillStyle = "#e0e0e0"; // 浅灰色网格
// 绘制垂直线（通过宽度很小的 fillRect 实现）
for (let x = 0; x <= w; x += step) {
ctx.fillRect(x, 0, 1, h);
}
// 绘制水平线
for (let y = 0; y <= h; y += step) {
ctx.fillRect(0, y, w, 1);
}
}
// drawGrid(ctx, canvas.width, canvas.height, 20);
常见错误与解决方案
在探索 fillRect() 的过程中，我们可能会遇到一些“坑”。让我们来看看如何避免它们。
错误 1：参数顺序混淆
最常见的问题是误以为参数是 (x, y, height, width)（Y轴在后的习惯），导致宽度和高度对调。请务必牢记标准顺序是 X, Y, W, H。
错误 2：忘记设置 fillStyle
如果你发现你的矩形一直是黑色的，哪怕你之前设置了 INLINECODE3b3af762，请检查你是否设置了 INLINECODE52e8679c。记住，INLINECODE3efba917 和 INLINECODEd09bf350 是两个独立的状态。
错误 3：坐标导致的“看不见”
新手常写出 INLINECODE6ada7208，却因为画布本身只有 300px 宽而什么也看不见。确保 INLINECODE3149d9e5 不超过画布宽度，y + height 不超过画布高度。
错误 4：使用 drawImage 的思维理解 fillRect
fillRect(x, y, w, h) 的 是左上角坐标。这与 HTML 元素的定位方式类似。不要混淆为矩形的中心点。
性能优化与最佳实践
当我们处理大量图形时，性能至关重要。
- 减少状态切换：尽量将相同颜色的 INLINECODE28e88642 调用放在一起。频繁切换 INLINECODE5cda8c91 会增加 Canvas 上下文的开销。
优化前：
ctx.fillStyle = ‘red‘; ctx.fillRect(0,0,10,10);
ctx.fillStyle = ‘blue‘; ctx.fillRect(20,0,10,10);
ctx.fillStyle = ‘red‘; ctx.fillRect(40,0,10,10);
优化后（批处理）：
ctx.fillStyle = ‘red‘;
ctx.fillRect(0,0,10,10);
ctx.fillRect(40,0,10,10); // 一起画完红色的
ctx.fillStyle = ‘blue‘; // 再切换颜色
ctx.fillRect(20,0,10,10);
- 整数坐标的优势：在现代浏览器中，当你的坐标和尺寸为整数（如 INLINECODEc00a468f 而非 INLINECODEabc0cac1）时，Canvas 的渲染引擎通常能避免抗锯齿计算，从而绘制出边缘清晰锐利的矩形，且速度略快。如果不需要亚像素级精度，可以使用
Math.floor()取整。
- 避免过度绘制：如果你只是想清空画布，直接使用 INLINECODE20376a53 通常比 INLINECODE731fb2d3 更高效，也避免了潜在的颜色混合问题。
浏览器兼容性
好消息是，fillRect() 作为最核心的 API，支持度极高。只要是支持 HTML5 Canvas 的浏览器，都完美支持此方法。这包括：
- Google Chrome (任何版本)
- Firefox (任何版本)
- Safari (任何版本)
- Opera (任何版本)
- Edge (所有版本)
- Internet Explorer 9+ (IE8 及以下不支持 Canvas)
总结与下一步
在这篇文章中，我们全面解析了 HTML Canvas 的 fillRect() 方法。我们了解到：
- 它是 Canvas 绘图的基础，用于填充矩形区域。
- 它依赖于当前的
fillStyle状态。 - 坐标系统原点在左上角，参数顺序为 X, Y, 宽度, 高度。
- 它不仅可以画图，还能用于清空画布、绘制背景和网格。
- 通过批处理相同颜色的操作和取整坐标，我们可以优化性能。
下一步建议：
既然你已经掌握了 INLINECODE4a85cbe3，你可以尝试结合它的兄弟方法 INLINECODE15c1ce97 (描边) 和 INLINECODEf9dc7fb7 (清除) 来创造更复杂的图形。或者，尝试编写一个简单的“俄罗斯方块”游戏逻辑，利用 INLINECODE74c771fb 来渲染方块。Canvas 的世界非常精彩，现在你已经掌握了开启这扇大门的钥匙！
希望这篇文章能帮助你更好地理解和使用 Canvas API。继续探索，保持好奇，你一定能构建出令人惊叹的网页图形体验！