canvas 标签本身不绘图，必须通过 JavaScript 调用 getContext("2d") 获取 2D 渲染上下文才能绘图；需先用 document.getElementById() 获取 canvas 元素，且宽高须用 HTML 属性而非 CSS 设置，否则导致失真；绘图前须注意坐标系、fillStyle、beginPath() 及手动清屏等默认状态问题。
canvas 标签本身不画任何东西，它只是个“空画布”，必须配合 JavaScript 的 getContext("2d") 才能开始绘图。直接写 <canvas></canvas> 页面上什么也不会出现。
怎么获取绘图上下文（getContext("2d")）
这是所有操作的前提，漏掉这步就等于没开工。
- 必须先用
document.getElementById()拿到canvas元素，不能直接对querySelector返回的节点调用getContext后再赋值给变量——顺序错了会报Cannot read property 'getContext' of null -
getContext("2d")返回的是一个 2D 渲染上下文对象，不是 DOM 节点，后续所有绘图方法（如fillRect、strokeText）都挂在这个对象上 - 如果页面还没加载完就执行 JS，
getElementById可能返回null；建议把脚本放在</body>前，或用DOMContentLoaded包裹
宽高必须用 HTML 属性，别用 CSS
用 style="width: 300px; height: 150px" 看起来画布变大了，但实际绘图会严重拉伸失真——因为 CSS 只缩放显示效果，不改变底层像素网格。
- 正确写法：
<canvas id="myCanvas" width="300" height="150"></canvas> - 错误写法：
<canvas id="myCanvas" style="width:300px;height:150px"></canvas>（即使加了width和height属性，CSS 也会覆盖渲染分辨率） - 如果需要响应式，得用 JS 动态读取父容器尺寸，再重新设置
canvas.width和canvas.height，并重绘内容
为什么画布是空白的，或者只显示一半图形？
常见原因不是代码写错，而是坐标系和默认状态没理清。
立即学习“前端免费学习笔记（深入）”；
-
fillRect(0, 0, 100, 100)是从左上角开始画，但如果你没设canvas的width/height，它会用默认的 300×150，而你画的矩形可能超出可视区域 -
fillStyle默认是"#000000"（黑色），如果背景也是深色，图形就“隐形”了；记得显式设置ctx.fillStyle = "#ff0000"或先清空背景 - 没调用
beginPath()就连续画线，路径会累加，导致意外连接；画圆、贝塞尔曲线等路径类操作前务必加beginPath() - 部分浏览器（如旧版 Safari）对
canvas的toDataURL()或导出有安全限制，跨域图片未设置crossOrigin属性时会触发SecurityError
最易被忽略的一点：canvas 是位图，不是矢量容器。每次重绘都要手动清除旧内容（比如用 clearRect()），否则动画会拖影，交互反馈会残留——这和 DOM 更新机制完全不同，得自己管“脏区域”。
