Canvas API 是浏览器原生位图绘制接口，无状态、无图层；需用 getContext('2d') 获取上下文，注意 DOM 加载、HTML 宽高属性及高清屏适配；矩形方法即刻绘制，路径操作须 beginPath()→fill()/stroke()；clearRect() 不重置状态，清屏推荐 canvas.width = canvas.width 或 save()/restore()。
Canvas API 是浏览器原生提供的、用于在网页上动态绘制位图的底层图形接口，它不自动记录绘图状态，也不提供图层或对象模型——画完即“失忆”，所有图形都直接渲染到像素缓冲区。
怎么获取并初始化 <canvas> 上下文
必须先用 getContext('2d') 获取 2D 渲染上下文，这是后续所有绘图操作的入口；调用失败（比如传错参数）会返回 null，不报错但后续方法全失效。
- 确保 DOM 已加载完成再访问
canvas元素，否则getElementById返回null - 不要忽略
width和height属性：CSS 设置宽高只会缩放画布，真正绘图区域由 HTML 属性决定 - 若需高清显示（如 Retina 屏），需手动按
window.devicePixelRatio缩放 canvas 像素尺寸，并用ctx.scale()校正坐标系
fillRect()、strokeRect() 和路径绘制的区别
矩形类方法是“即刻绘制”，而 beginPath() + moveTo() + lineTo() 等构成路径后，必须显式调用 fill() 或 stroke() 才真正上屏。路径不会自动闭合，closePath() 只是补一条线段，不触发填充/描边。
-
fillRect(x, y, w, h)绘制实心矩形，不依赖路径，也不受beginPath()影响 - 路径操作（如
arc()、quadraticCurveTo()）必须成对使用：beginPath()→ 绘制命令 →fill()/stroke() - 漏掉
beginPath()会导致新图形叠加在旧路径上，多次stroke()会重复描边
为什么 clearRect() 不总能清干净？
clearRect() 只清除指定矩形区域的像素，但它不重置绘图状态（如颜色、线条宽度、变换矩阵）。如果之前用了 ctx.translate() 或 ctx.rotate()，清空区域可能偏移；更隐蔽的问题是：它不清除阴影、滤镜等合成效果残留。
立即学习“Java免费学习笔记（深入）”；
- 最稳妥的清屏方式是重设 canvas 尺寸：
canvas.width = canvas.width（会重置所有上下文状态） - 若需保留部分状态（如全局 alpha），应先
save()，清屏后再restore() - 动画中频繁调用
clearRect()比重设尺寸性能更好，但务必确认坐标系未被意外变换
Canvas 的“无状态”本质决定了它灵活也易错——每次 stroke() 都是你最后一次 beginPath() 以来的所有路径，每次 fillStyle 改变只影响之后的填充，没有“撤销”概念。习惯性写 beginPath() 和检查 ctx 是否为有效对象，比记住所有 API 更关键。
