必须调用 getcontext('2d') 获取绘图上下文，仅接受小写字符串'2d'，错误参数返回null；fillrect/strokerect/clearrect为即用即画快捷方法；lineto需配合moveto和stroke()使用；canvas宽高须用html属性设置，非css；上下文为状态机，属性持续生效。
getContext('2d') 必须调用，且只认字符串 '2d'
不调用 getContext('2d') 就没法绘图——它不是可选步骤，而是获取绘图能力的唯一入口。传错参数（比如 '2D'、"two-d" 或漏掉引号）会直接返回 null，后续所有 fillRect、stroke 调用都会静默失败，控制台也不报错，极难排查。
常见错误现象：ctx.fillRect is not a function 或完全没图形输出，大概率是这一步出问题。
-
getContext('2d')返回的是一个 2D 绘图上下文对象，不是 canvas 元素本身 - 同一个 canvas 不能多次获取不同类型的上下文（比如先取
'2d'再取'webgl'），浏览器会拒绝第二次调用 - IE9 及更早版本不支持
getContext，需做存在性判断（if (canvas.getContext)）
drawRect 系列方法：fillRect、strokeRect、clearRect 的区别与适用场景
这三个方法都只要四个数字参数：x、y、width、height，全部以左上角为原点，Y 轴向下增长。它们不依赖路径（beginPath）、不触发 stroke() 或 fill()，属于“即用即画”的快捷指令。
-
fillRect(x, y, w, h)：绘制实心矩形，颜色由ctx.fillStyle决定（默认黑色） -
strokeRect(x, y, w, h)：仅描边，线宽和颜色由ctx.lineWidth和ctx.strokeStyle控制（默认 1px 黑色） -
clearRect(x, y, w, h)：把指定区域像素清空为完全透明，不是设为白色——这点常被误解
性能提示：如果只是画单个矩形，用这三个方法比走 beginPath → rect → fill/stroke 路径方式更快；但若要组合多个形状或加圆角、阴影等高级效果，就必须走路径 API。
lineTo / moveTo 必须配对使用，且 stroke() 才真正落笔
画线不是“设置起点+设置终点”就完事了。moveTo(x, y) 只是把“虚拟画笔”移到某点，lineTo(x, y) 是从当前笔位置画到新点——它不自动重置起点，也不自动连接成闭合图形。
- 漏掉
beginPath()：前一次路径可能残留，导致意外连线（尤其在循环绘图时） - 漏掉
stroke()：所有moveTo/lineTo都只是记录路径，画面不会有任何变化 -
lineTo连续调用时，每次的起点 = 上次lineTo的终点；没有上一次终点，lineTo会静默忽略（不报错）
示例：画一条红斜线
ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(100, 100); ctx.strokeStyle = 'red'; ctx.stroke();
canvas 宽高必须用 HTML 属性，不能只靠 CSS
写成 <canvas width="400" height="300"></canvas> 是必须的；如果只用 CSS 设置（如 style="width:400px;height:300px"），画布逻辑尺寸仍是默认的 300×150，图形会被拉伸、模糊，坐标也会错乱。
- canvas 实际渲染分辨率由
width和height属性决定，CSS 只控制显示大小 - 响应式场景下，需同步修改属性值（
canvas.width = window.innerWidth）并重绘，不能只改 CSS - 移动端高 DPR 设备（如 iPhone）需额外缩放
ctx.scale(window.devicePixelRatio, window.devicePixelRatio)才能清晰显示
最易被忽略的一点：getContext('2d') 返回的对象是状态机——fillStyle、lineWidth 等设置会持续生效，直到你再次修改。别假设每次绘图前它都是“干净”的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
