必须调用 getContext("2d")才能绘图，因其返回的 CanvasRenderingContext2D 对象是执行绘图操作的唯一接口；漏掉则所有方法静默失败。
Canvas 本身不绘图，必须通过 JavaScript 获取上下文后才能动笔；没调 getContext("2d")，所有绘图方法都会静默失败。
为什么 canvas 绘图前必须调用 getContext("2d")
canvas 元素只是个空容器，像一张白纸但没铅笔——getContext("2d") 返回的 CanvasRenderingContext2D 对象才是执笔的手。漏掉这步，fillRect、stroke 等方法全无响应，控制台也不报错，极易误判为“代码没生效”。
- 必须在 DOM 加载完成后获取元素，否则
document.getElementById返回null - 同一 canvas 多次调用
getContext("2d")会返回同一个上下文对象，不是新实例 - 若需 WebGL 渲染，应传
"webgl"，但 2D 图表、UI 绘制一律用"2d"
width 和 height 必须写在 HTML 属性里，不能只靠 CSS
CSS 设置的 width/height 只缩放画布显示区域，不改变底层像素网格。结果是图形被拉伸、模糊、坐标错位——比如你画了个 100×100 的矩形，CSS 把 canvas 拉到 200×200，它就变成又宽又扁的椭圆。
- 正确写法：
<canvas id="myChart" width="400" height="300"></canvas> - 错误写法：
<canvas id="myChart" style="width:400px;height:300px"></canvas> - 响应式需求下，可用 JS 动态重设
canvas.width和canvas.height，再调ctx.scale()补偿设备像素比
绘图前不调 beginPath() 会导致路径意外连接
Canvas 的路径是累积的。如果画完一条线没重置，下次 lineTo() 或 arc() 会从上一次终点继续连过去，折线图变乱线，饼图扇形粘连——这种 bug 很难肉眼定位。
立即学习“前端免费学习笔记（深入）”；
- 每次绘制独立形状前都应调
ctx.beginPath() -
fillRect()、strokeRect()是原子操作，不依赖路径，无需beginPath() - 用
closePath()显式闭合路径可避免自动连线，尤其画多边形时更可控
颜色和样式必须在绘图命令前设置，顺序错了就无效
fillStyle、strokeStyle、lineWidth 这些属性是“当前状态”，只影响之后的 fill() 或 stroke()。写在 fillRect(0,0,100,100) 后面？那这次填充完全不会变色。
- 填充类操作（
fillRect、fill()）读取fillStyle - 描边类操作（
strokeRect、stroke()）读取strokeStyle和lineWidth - 文字绘制用
font+fillText()，别忘了先设ctx.fillStyle
最常被忽略的是设备像素比适配：高分屏下，1px 线条可能被渲染成模糊的 2px 带，需要手动缩放 canvas 像素网格并调用 ctx.scale(dpr, dpr) ——这步不在基础教程里，但上线后第一眼就能看出差别。
