在HTML Canvas中绘制矩形是基础且常用的操作，fillRect是填充矩形的核心方法，但不少开发者初次使用时会出现调用后矩形不显示的情况，下面先介绍基础绘制流程，再分析常见问题及解决方法。
Canvas绘制矩形的基础流程
要使用fillRect绘制矩形，首先需要完成Canvas的基础初始化，步骤如下：
- 在HTML中定义
<canvas>标签，设置合适的宽高 - 通过JavaScript获取
<canvas>元素的上下文对象 - 配置填充样式，调用
fillRect方法传入矩形参数
下面是一个最基础的绘制示例：
// 获取canvas元素
const canvas = document.getElementById('myCanvas');
// 获取2d上下文
const ctx = canvas.getContext('2d');
// 设置填充颜色
ctx.fillStyle = 'blue';
// 绘制填充矩形，参数依次为x坐标、y坐标、宽度、高度
ctx.fillRect(10, 10, 100, 50);
fillRect不显示的常见原因及解决方法
1. 未正确获取Canvas上下文
如果getContext方法调用失败，后续所有绘制操作都不会生效。常见原因是获取元素时ID不匹配，或者代码执行时Canvas元素还未加载完成。
解决方法：确认Canvas的ID和获取时的一致，或者将脚本放在<body>底部，也可以监听DOMContentLoaded事件再执行绘制逻辑。
// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('myCanvas');
// 判断canvas是否存在
if (!canvas) {
console.error('未找到canvas元素');
return;
}
const ctx = canvas.getContext('2d');
if (!ctx) {
console.error('获取上下文失败');
return;
}
ctx.fillStyle = 'red';
ctx.fillRect(20, 20, 80, 40);
});
2. 矩形坐标或尺寸超出画布范围
fillRect的前两个参数是矩形左上角的坐标，如果坐标值或者宽高设置不合理，导致矩形完全在画布可视区域外，就会看不到绘制结果。
比如画布宽度是200，高度是100，如果调用fillRect(250, 50, 100, 50)，矩形的x坐标已经超出画布宽度，自然无法显示。
解决方法：检查坐标和尺寸参数，确保矩形在画布的0 ~ canvas.width和0 ~ canvas.height范围内。
3. 未设置填充样式或样式为透明
如果fillStyle未设置，默认是黑色，但如果设置成了完全透明的颜色，比如rgba(0,0,0,0)，或者设置成了和画布背景相同的颜色，也会导致矩形看起来不显示。
解决方法：显式设置fillStyle为可见的颜色，比如ctx.fillStyle = '#333'或者ctx.fillStyle = 'rgb(255, 0, 0)'。
4. Canvas尺寸设置方式错误
很多人会通过CSS设置Canvas的宽高，这会导致画布的实际像素尺寸和显示尺寸不一致，绘制的内容可能会被缩放或者无法正确显示。正确方式是通过Canvas的width和height属性设置尺寸。
错误示例：
<canvas id="myCanvas" style="width: 400px; height: 200px;"></canvas>
正确示例：
<canvas id="myCanvas" width="400" height="200"></canvas>
5. 绘制代码执行顺序错误
如果先调用了fillRect，之后才设置fillStyle，那么矩形会使用设置之前的样式（默认黑色）绘制，但如果之后又修改了画布的其他内容覆盖了矩形，也会导致看不到结果。
解决方法：遵循先设置样式，再调用绘制方法的顺序，避免绘制后被其他操作覆盖。
其他矩形绘制方法说明
除了fillRect，Canvas还提供了其他矩形相关的方法：
strokeRect(x, y, width, height)：绘制矩形边框，需要配合strokeStyle和lineWidth使用clearRect(x, y, width, height)：清除指定区域的矩形内容，相当于擦除操作- 先调用
rect(x, y, width, height)定义矩形路径，再调用fill()或者stroke()填充或描边
下面是strokeRect的使用示例：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 设置边框颜色
ctx.strokeStyle = 'green';
// 设置边框宽度
ctx.lineWidth = 3;
// 绘制矩形边框
ctx.strokeRect(30, 30, 120, 60);
总结
解决fillRect不显示的问题，核心是从上下文获取、坐标尺寸、样式配置、画布设置、执行顺序这几个方面逐一排查，按照正确的流程初始化Canvas并调用绘制方法，就能稳定实现矩形的绘制效果。
HTML_CanvasfillRect绘制矩形canvas上下文修改时间：2026-07-21 12:39:18