canvas绘图需手动触发渲染，所有操作在内存中准备指令，调用fill()、stroke()等才上屏；必须先获取dom元素再调用getcontext('2d')，参数错误或元素未加载会导致返回null而报错；需确保html中存在canvas元素且js执行时dom已就绪；'2d'大小写敏感；高dpi需同步设置canvas.width/height并scale；样式无继承，需显式设置fillstyle、strokestyle等；linewidth=1易模糊，建议设为2并translate(0.5,0.5)；save()/restore()可隔离状态；beginpath()必须在每次新路径前调用，否则旧路径累积；路径不调用fill()/stroke()则不可见，且提交后即消耗，不可复用。
Canvas 绘图不是“画完就显示”，而是必须手动触发渲染——getContext('2d') 返回的绘图上下文不自动绘制，所有操作都只是在内存中准备指令，直到你调用 fill()、stroke() 或 drawImage() 等才会真正上屏。
获取 Canvas 元素和 2D 上下文
必须先拿到 DOM 元素，再调用 getContext('2d')；传错参数（比如 'webgl' 却没写 WebGL 逻辑）或元素未加载完成，都会返回 null，后续调用会直接报 TypeError: Cannot read property 'xxx' of null。
- 确保
<canvas id="myCanvas"></canvas>已存在于 HTML 中，且 JS 执行时 DOM 已就绪（放在
