异常教程

HTML canvas fillRect() 方法（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

在网页开发中，HTML Canvas 提供了一个强大的画布环境，允许开发者通过 JavaScript 动态绘制图形、动画和交互式内容。而 fillRect() 方法作为 Canvas API 的核心功能之一，是绘制矩形并填充颜色的基础工具。无论是设计游戏界面、数据可视化图表，还是创建交互式艺术效果，掌握 fillRect() 方法都是关键一步。本文将从基础语法到高级应用，结合代码示例和实际案例，深入解析这一方法的功能与技巧，帮助开发者快速上手并灵活运用。

基础语法与核心概念

1. Canvas 的工作原理

想象 Canvas 是一块空白的画布，开发者通过 JavaScript 命令在这块画布上“绘画”。fillRect() 方法的作用是“填充一个矩形区域”，类似于用画笔涂抹颜色覆盖指定区域。其语法结构如下：

context.fillRect(x, y, width, height);

其中：

  • context：通过 canvas.getContext("2d") 获取的 2D 绘图上下文对象。
  • x：矩形左上角的 X 坐标，坐标系原点位于画布左上角。
  • y：矩形左上角的 Y 坐标。
  • width：矩形的宽度（水平方向）。
  • height：矩形的高度（垂直方向）。

2. 第一个示例：绘制一个红色矩形

以下代码演示了如何在 Canvas 上绘制一个红色的 100x100 像素矩形：

<canvas id="myCanvas" width="200" height="200"></canvas>

<script>
  const canvas = document.getElementById("myCanvas");
  const context = canvas.getContext("2d");
  
  // 设置填充颜色为红色
  context.fillStyle = "red";
  
  // 绘制矩形：左上角坐标 (50,50)，宽高 100
  context.fillRect(50, 50, 100, 100);
</script>

关键点说明：

  • fillStyle 属性定义填充颜色，可设置为颜色名称、十六进制值、RGB 或 RGBA 值。
  • 坐标系方向：Y 轴向下增长，这与传统数学坐标系不同，需注意方向调整。

深入参数与样式控制

1. 参数的动态调整

通过修改 x、y、width 和 height 参数，可以灵活控制矩形的位置和尺寸。例如，以下代码绘制三个不同位置的矩形：

context.fillRect(10, 10, 80, 80);  // 左上角小矩形
context.fillRect(110, 110, 120, 60); // 右下角长条形
context.fillRect(50, 50, 100, 100); // 中心大矩形

2. 颜色与透明度的控制

fillStyle 支持多种颜色格式，包括：

  • 预设颜色名称：如 "red"、"blue"。
  • 十六进制值：如 "#FF0000"（红色）。
  • RGB 格式：如 "rgb(255, 0, 0)"。
  • RGBA 格式：通过添加透明度参数，例如 "rgba(255, 0, 0, 0.5)"（半透明红色）。

案例：渐变色与透明度叠加

// 创建线性渐变色
const gradient = context.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(1, "yellow");
context.fillStyle = gradient;

// 绘制半透明矩形
context.fillStyle = "rgba(0, 0, 255, 0.3)";
context.fillRect(20, 20, 150, 150);

进阶应用：动画与交互

1. 基于 fillRect() 的动画效果

通过循环调用 fillRect() 并动态修改参数，可以实现简单的动画。例如，让矩形沿 X 轴左右移动：

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");
let x = 0;

function animate() {
  // 清除画布
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制移动的矩形
  context.fillStyle = "green";
  context.fillRect(x, 50, 50, 50);
  
  // 更新位置（循环移动）
  x += 2;
  if (x > canvas.width) x = -50;
  
  // 请求下一帧动画
  requestAnimationFrame(animate);
}

animate();

关键技巧：

  • clearRect() 方法用于清除指定区域，避免重绘时出现拖影。
  • requestAnimationFrame() 是浏览器优化动画性能的核心 API，确保每帧渲染与屏幕刷新率同步。

2. 响应用户输入

结合鼠标事件或键盘事件，可以让矩形与用户互动。例如，点击画布改变矩形颜色：

canvas.addEventListener("click", function() {
  // 随机生成 RGB 颜色值
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  context.fillStyle = `rgb(${r}, ${g}, ${b})`;
  context.fillRect(0, 0, canvas.width, canvas.height);
});

性能优化与常见问题

1. 优化绘制效率

  • 减少重绘次数：避免频繁调用 fillRect()，尽量合并绘制操作。
  • 使用 save() 和 restore()：保存和恢复绘图状态（如颜色、变换），减少重复设置的开销。
  • 离屏绘制：通过创建“隐藏画布”预渲染复杂图形，再一次性绘制到主画布。

2. 常见问题解答

Q：为什么矩形没有显示出来？

  • 检查 fillStyle 是否未设置（默认颜色为黑色，可能与背景色相同）。
  • 确认 x、y 参数未超出画布范围。

Q：如何让矩形旋转或缩放？
通过 context.translate()、context.rotate() 和 context.scale() 方法修改变换矩阵，例如：

context.translate(100, 100); // 平移到中心点
context.rotate(Math.PI / 4); // 旋转 45 度
context.fillRect(-25, -25, 50, 50); // 绘制中心对称的矩形

结论

HTML canvas fillRect() 方法是开发动态图形和交互式网页的核心工具。从基础的矩形绘制到复杂的动画与用户交互，开发者可以通过调整参数、颜色和结合其他 Canvas API（如变换、路径、事件监听），实现丰富的视觉效果。掌握这一方法不仅能提升开发效率，更能为后续探索 Canvas 的高级功能（如纹理映射、粒子系统）打下坚实基础。建议读者通过实际项目实践，逐步探索 fillRect() 的更多可能性！

推荐阅读：若想进一步学习 Canvas 动画或游戏开发，可以尝试实现贪吃蛇、俄罗斯方块等经典小游戏，实践 fillRect() 在真实场景中的应用。

最新发布

查看更多文章