fillrect 和 strokerect 是参数固定、行为明确的绘图函数，调用即出图；常见不显示原因是 canvas 未设宽高、getcontext('2d') 失败、fillstyle 透明或与背景同色、坐标系理解错误（y 向下为正）、负宽高被取绝对值，以及混用路径时未调用 beginpath() 导致状态污染。
fillRect 和 strokeRect 不是“需要教程才能用”的方法——它们就是两个参数固定、行为明确、调用即出图的函数。只要你已经拿到 ctx（2D 绘图上下文），直接传坐标和宽高，矩形就画出来了。
为什么调用 fillRect 却没显示？
最常见原因不是代码写错，而是 canvas 元素本身没设宽高，或 JS 获取上下文失败。
- HTML 中的
<canvas></canvas>默认尺寸是 300×150 像素，但若 CSS 设置了width: 100%或transform: scale()，会导致绘制区域和显示区域错位——此时图形可能被裁剪或缩成看不见 - 必须用
canvas.getContext('2d')获取上下文，漏掉这步或拼错'2d'（比如写成'2D'）会返回null，后续所有绘图调用静默失败 -
fillRect(0, 0, 10, 10)确实画了，但如果fillStyle是透明色（如'rgba(0,0,0,0)'）或跟背景同色，也等于没画
fillRect 和 strokeRect 的参数与坐标系陷阱
两者签名完全一致：fillRect(x, y, width, height)，但新手常在 y 上栽跟头。
- 原点在左上角，
y增大方向向下——这不是数学坐标系，也不是 SVG 坐标系，是 canvas 原生设定 -
x和y指的是矩形左上角顶点，不是中心点；负值合法，但超出 canvas 边界的部分会被自动裁剪 - 宽高不能为负：如果传入负数，canvas 会自动取绝对值（例如
fillRect(100, 100, -50, -30)等价于fillRect(50, 70, 50, 30)），但逻辑容易混乱，建议始终传正值
想同时填充+描边？别硬套 fillRect + strokeRect
可以，但不推荐——它们是两条独立指令，不共享路径，无法控制描边相对于填充的内外偏移（比如只描外边框、或只描内边框）。真正需要混合效果时，应切换到路径模式：
- 先
ctx.beginPath() - 再
ctx.rect(x, y, width, height) - 然后依次调用
ctx.fill()和ctx.stroke() - 这样描边线宽、lineCap、lineJoin 都能精确控制，且填充和描边共用同一几何边界
注意：此时必须手动 beginPath()，否则 rect() 会追加到上一次路径里，导致意外叠加渲染。
性能和状态污染问题容易被忽略
fillRect 和 strokeRect 虽然省事，但会悄悄影响后续绘图：
- 它们不重置路径，也不清空当前路径栈，所以之后调用
fill()或stroke()可能复用旧路径 - 它们不修改
fillStyle或strokeStyle，但会“继承”当前值——如果你在画一堆fillRect前忘了设fillStyle，所有矩形都会用默认黑色 - 高频绘制（如动画帧）中反复调用它们没问题，但若混用路径操作（比如画圆、贝塞尔曲线），务必在每次路径绘制前加
ctx.beginPath()，否则视觉结果不可预测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
