HTML怎么做canvas画矩形_HTML canvas画矩形rect方法【最佳实践】-html教程-PHP中文网

rect() 不直接绘制矩形，仅添加路径，需配合 fill() 或 stroke() 才可见；fillRect() 和 strokeRect() 是一站式绘制方法，无需管理路径；rect() 仅适用于复合路径或特殊操作场景。

html怎么做canvas画矩形_html canvas画矩形rect方法【最佳实践】

canvas 画矩形有三种主流方式，但 rect() 不是“直接画”，它只是建路径——用错就啥也不显示，这是新手最常卡住的地方。

为什么调用了 `rect()` 却没看到矩形？

因为 rect() 只向当前路径添加一个矩形轮廓，不执行绘制。必须紧接着调用 ctx.stroke()（描边）或 ctx.fill()（填充），否则 canvas 完全无反应。

常见错误现象：ctx.rect(10, 10, 100, 50); 单独执行 → 页面空白，控制台也无报错
正确写法示例：ctx.rect(10, 10, 100, 50); ctx.fill(); 或 ctx.rect(10, 10, 100, 50); ctx.stroke();
如果之前已调用过 fill() 或 stroke()，记得用 ctx.beginPath() 重置路径，否则新矩形会和旧路径叠加，导致意外描边/填充范围

`fillRect()` 和 `strokeRect()` 更适合简单矩形

这两个方法是“一站式”绘制：传入坐标和宽高，立刻出图，不用管路径、不用手动调 fill/stroke。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

fillRect(x, y, width, height)：画实心矩形，受 ctx.fillStyle 控制颜色
strokeRect(x, y, width, height)：画空心矩形，受 ctx.strokeStyle 和 ctx.lineWidth 控制样式
性能更优：绕过路径管理，浏览器内部优化更直接
兼容性一致：IE9+、Firefox、Chrome、Safari、Opera 全支持，和 rect() 一样

什么时候非得用 `rect()`？

只有当你需要把矩形作为更大路径的一部分时才用它，比如矩形 + 圆角 + 弧线拼成复合图形，或想对多个形状统一做 clip()、isPointInPath() 判断。

典型场景：绘制带圆角的按钮轮廓（先 rect()，再手动改路径点）、做碰撞检测区域、配合 ctx.clip() 限定后续绘制范围
注意：rect() 添加的是闭合路径，不能像 lineTo() 那样追加其他线段再闭合——它自己就是完整矩形
若需多次复用同一矩形路径，建议封装为函数并始终以 beginPath() 开头，避免路径污染

真正容易被忽略的点是：canvas 的绘图状态（如 fillStyle、strokeStyle、lineWidth）是全局的，且不会因你换用 rect() 或 fillRect() 而自动重置。画完一个红框再画蓝框，别忘了手动设 ctx.fillStyle = 'blue'——否则还是红色。