Canvas需用width/height属性初始化，不可用CSS；getContext('2d')获取绘图上下文；fillRect填充、strokeRect描边，无drawRect；动画须clearRect清屏后重绘；路径绘制前必调beginPath()。
Canvas 不是现成的绘图工具，而是一块空白画布——它本身不画任何东西，所有图形都得靠 JavaScript 一帧一帧手动绘制。
Canvas 元素怎么初始化才不会白屏
常见错误是只写 <canvas></canvas> 标签却不设宽高，或用 CSS 拉伸尺寸，结果图形被拉糊、坐标错乱、甚至完全不显示。
- 必须通过
width和height属性（不是 CSS）设置 Canvas 像素尺寸，例如：<canvas width="400" height="300"></canvas> - 获取上下文要用
getContext('2d')，返回CanvasRenderingContext2D对象，后续所有绘图操作都靠它 - 如果页面动态加载 Canvas，确保 DOM 加载完成后再执行
document.getElementById()和getContext()
drawRect / fillRect / strokeRect 区别在哪
这三个函数名看着像，但行为完全不同，混用会导致“画了却看不见”。
-
drawRect(x, y, w, h)—— 不存在。这是典型误记，Canvas API 中没有这个函数 -
fillRect(x, y, w, h)—— 填充一个实心矩形（默认黑色，可通过fillStyle改） -
strokeRect(x, y, w, h)—— 只描边，不填充；描边宽度由lineWidth控制，颜色由strokeStyle控制 - 注意：Canvas 坐标原点在左上角，
x向右增，y向下增，和数学坐标系相反
为什么 clearRect 后图形还在闪动
这不是 clearRect 的问题，而是没做「清屏→重绘」完整循环，导致旧帧残留。
立即学习“Java免费学习笔记（深入）”；
-
clearRect(0, 0, canvas.width, canvas.height)只擦除像素，不重置绘图状态（比如fillStyle、lineWidth等仍保留） - 动画场景中，必须在每一帧开头调用
clearRect，再重新调用fillRect、beginPath()等绘制新内容 - 如果用了
save()/restore()或变换（translate、rotate），clearRect不会自动还原这些状态，需自行管理
路径绘制（lineTo / arc / closePath）总连不上线
Canvas 的路径是显式状态机，不调 beginPath() 就会把新图形追加到旧路径里，造成意外连接或重复描边。
- 每次画新图形前，务必先调
ctx.beginPath()，否则lineTo()会从上一次路径终点继续画 -
moveTo(x, y)是“抬笔移动”，不画线；lineTo(x, y)是“落笔连线”，必须配合beginPath()+moveTo()才能控制起点 -
closePath()自动画一条线回到起点，但它不自动stroke()或fill()，该调还得调 - 圆弧用
arc(x, y, r, startAngle, endAngle, anticlockwise)，角度单位是弧度，不是度数——别忘了Math.PI / 180转换
Canvas 的“简单”是假象：它不维护图形对象，不响应事件，不支持图层。一旦需要拖拽、缩放、点击判断，就得自己算坐标、存数据、做碰撞检测——这些才是实际项目中最容易卡住的地方。
