如何在HTML Canvas中正确绘制矩形（解决fillRect不显示的问题）

聖光之護 2026-01-04 00:00:00 次阅读

canvas中调用`fillrect(x, y, width, height)`时若宽高为0，将无法渲染任何可见图形；必须确保`width`和`height`为大于0的数值，才能正常显示矩形。

在HTML Canvas绘图中，fillRect() 是最基础的矩形绘制方法，其签名严格为：

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

其中 x 和 y 表示矩形左上角坐标（相对于canvas左上角原点），而 width 和 height 必须为正值——若任一值为 0 或负数，浏览器将绘制一个“零面积”区域，结果就是完全不可见，且不会报错，极易被忽略。

例如，原始代码中的这一行：

context.fillRect(50, 50, 0, 0); // ❌ 宽=0，高=0 → 无渲染

虽然语法合法、控制台无报错，但实际绘制了一个“隐形矩形”，导致开发者误以为Canvas失效。

✅ 正确做法是明确指定合理的宽高（如 50 像素）：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

function draw() {
  // 绘制绿色方块（50×50，位于(50, 50)）
  ctx.fillStyle = "rgb(0, 200, 0)";
  ctx.fillRect(50, 50, 50, 50);

  // 绘制红色方块（50×50，位于画布原点）
  ctx.fillStyle = "rgb(200, 0, 0)";
  ctx.fillRect(0, 0, 50, 50);
}

draw();

⚠️ 注意事项：