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();⚠️ 注意事项：
- 确保
- 推荐在 draw() 中增加上下文存在性检查（if (ctx)），提升健壮性；
- 若Canvas尺寸未显式设置（通过HTML属性 width/height 或css），可能因默认尺寸（300×150）或CSS缩放导致视觉异常——建议始终用HTML属性定义画布分辨率：
总结：Canvas绘图不是“有调用就有显示”，而是严格依赖参数语义。牢记 fillRect 的四参数含义，杜绝传入 0 作为宽高，即可快速定位并修复此类“空白画布”问题。