如何使用JavaScript进行Canvas绘图【教程】

Canvas绘图需按序执行：先获取已挂载DOM的2D上下文，再调用beginPath()、stroke()/fill()；drawImage()须在img.onload内调用并处理跨域；clea

rRect/fillRect坐标原点在左上角；save()/restore()需成对使用且不跨函数；Canvas是无图层、无撤销的状态机模型。

Canvas 绘图不是“调用一个函数就出图”，而是需要先获取上下文、明确坐标系、手动触发绘制路径并提交渲染——漏掉 beginPath() 或忘了 stroke()/fill()，画布上什么都不会出现。

如何正确获取 2D 绘图上下文

必须通过 getContext('2d') 获取，且只能在 元素已挂载 DOM 后调用。常见错误是脚本执行早于元素解析，导致返回 null。

• 确保 JS 在