fillRect()和strokeRect()直接绘制实心或空心矩形，无需路径操作且立即生效；rect()仅创建闭合路径，须配合fill()或stroke()才能显示，适用于复合路径场景。
直接用
或
，别碰
——除非你真需要把它塞进复合路径里。
fillRect() 和 strokeRect() 是最简方案
这两个方法传入左上角坐标、宽高，立刻出图，不依赖路径状态，也不需要手动调
或
/
。
画实心矩形，颜色由
控制
画空心矩形，线条样式由
和
决定
它们性能更好：跳过路径构建和解析，浏览器可直接光栅化
IE9+ 全平台兼容，和
一致，但容错率高得多
rect() 不是“画矩形”，它是“建路径”
调用
后 canvas 什么都不会显示——它只是把一个闭合矩形路径加到当前路径中，必须紧接着调用
或
才能看见。
常见错误：
单独执行 → 页面空白，控制台无报错
正确写法：
如果之前已绘制过图形，漏掉
会导致新旧路径叠加，填充/描边范围异常
生成的是独立闭合路径，不能像
那样追加其他线段再闭合
为什么 fillRect() 画出来是黑的？
因为
和
是全局状态，不会随方法切换自动重置。画完一个红框再画蓝框，不改
就还是红色；没设
就默认用黑色描边。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
实心矩形颜色由
决定（支持颜色、渐变、图案）
空心矩形线条由
+
共同控制
圆角效果不能靠
直接实现，得用
配合
，或手绘路径
清除区域用
，它会把指定范围设为全透明，不是“擦掉”，而是覆盖
真正容易被忽略的是：canvas 没有“撤销”或“图层”概念，所有绘制都是像素覆盖。画错不是重来一次的问题，而是状态管理没跟上——比如忘了重置
，或者重复调用
导致线条变粗。每次调用前，先想清楚你要的到底是“一次性结果”，还是“路径的一部分”。
fillRect()strokeRect()rect()beginPath()fill()stroke()fillRect(x, y, width, height)ctx.fillStylestrokeRect(x, y, width, height)ctx.strokeStylectx.lineWidthrect()rect()fill()stroke()ctx.rect(10, 10, 100, 50);ctx.beginPath(); ctx.rect(10, 10, 100, 50); ctx.fill();beginPath()rect()lineTo()ctx.fillStylectx.strokeStylefillStylestrokeStylectx.fillStylectx.strokeStylectx.lineWidthfillRect()lineJoin = 'round'strokeRect()clearRect(x, y, w, h)fillStylestroke()