canvas绘图需先获取2D上下文对象：用document.getElementById()获取元素，再调用getContext(‘2d’)；漏此步则绘图静默失败。fillRect画实心矩形，strokeRect仅描边，均以左上角为坐标原点；路径绘制须beginPath→moveTo/lineTo→stroke/fill，缺beginPath会导致路径叠加；clearRect仅清像素，不重置状态，彻底重置可用canvas.width=canvas.width。
Canvas 绘图不是“写 html 标签”而是调用 JavaScript 2D 渲染上下文，不理解 getContext('2d') 就没法开始。
怎么拿到绘图用的上下文对象
必须先用 document.getElementById() 拿到 元素，再调它的 getContext('2d') 方法——漏掉这一步，所有绘图命令都会静默失败。
- 确保
元素已加载完成（放在底部，或监听domContentLoaded） -
getContext('2d')返回的是一个独立的绘图状态对象，不是 DOM 元素本身 - 如果传错参数（比如写成
'webgl'却没用 WebGL API），会返回NULL，后续调用方法会报TypeError: Cannot read Property 'xxx' of null
画矩形：fillRect 和 strokeRect 的区别
fillRect(x, y, width, height) 填充实心矩形；strokeRect(x, y, width, height) 只描边。它们都不受路径（path）影响，是独立的快捷命令。
- 坐标
(x, y)是左上角点，不是中心点 - 默认填充色是黑色，描边色也是黑色，但填充色和描边色互不影响：
ctx.fillStyle = 'red'不改变ctx.strokeStyle - 如果同时调用了
fillRect和strokeRect在同一区域，描边会盖在填充之上——想让描边居中，得手动调整宽度（比如用lineWidth = 2时，实际占 1px 向外、1px 向内）
画线段和路径：beginPath 到 stroke 的完整链路
画折线、多边形、曲线必须走路径流程：beginPath() → moveTo() / lineTo() / arc() 等 → stroke() 或 fill()。漏掉 beginPath() 会导致新图形叠加在旧路径上，反复调用 stroke() 会越画越粗。
立即学习“前端免费学习笔记（深入）”；
-
moveTo(x, y)抬笔移动起点，lineTo(x, y)落笔画线——不调moveTo直接lineTo，会从 (0, 0) 开始连过去 -
closePath()自动连线回起点，但不会自动绘制，仍需stroke()或fill() - 路径一旦
stroke()或fill()，就清空了；再次绘制需重新beginPath()
为什么 clearRect 不总能清干净
clearRect(x, y, width, height) 只清除指定矩形区域的像素，不是重置整个画布状态。它不会重置颜色、线宽、变换矩阵等设置。
- 如果之前设置了
ctx.globalAlpha = 0.5，clearRect后新画的内容依然半透明 - 要彻底“重来”，常用做法是用
canvas.width = canvas.width（重设宽高会清空像素并重置所有上下文状态） - 但注意：该操作会丢弃所有已应用的
transform、裁剪区（clip()）、阴影设置等——不是万能刷新键
Canvas 是状态机，不是声明式绘图；每一步都依赖前一步的状态。最常被忽略的，是忘记重置 beginPath() 和误以为 clearRect() 能还原上下文。