canvas.getcontext("2d")必须只调用一次并校验返回值，重复调用虽不报错但浪费资源；传参大小写或空格错误会静默返回null；width/height须用js或html设置，不可依赖css拉伸；动画循环中需同时使用clearrect和beginpath。
Canvas.getContext("2d") 必须只调用一次且需校验返回值
同一个 canvas 元素反复调用 getContext("2d") 不会报错，但每次都会触发内部资源初始化开销，且返回的是同一实例——重复获取纯属浪费。更危险的是，若传参写成 getContext("2D") 或 getContext("2d ")（大小写错误或尾随空格），会静默返回 null，后续所有绘图调用都无效却无提示。
务必在初始化阶段做一次获取并缓存：
- 用
document.getElementById或querySelector拿到元素后，先判空再调用getContext("2d") - 立即检查返回值：
if (!ctx) throw new Error("2D context not supported") - 把
ctx存为模块级变量或类成员，动画循环中直接复用，绝不重取
width/height 属性必须用 JS 或 HTML 写死，不能靠 CSS 拉伸
CSS 的 style.width/style.height 只控制显示尺寸，不改变底层像素缓冲区分辨率。默认 canvas 是 300×150 像素，若仅用 CSS 拉伸到 800×600，实际还是 300×150 的位图被放大，导致模糊、坐标偏移、触控错位——尤其在 window.devicePixelRatio > 1 的高清屏上极其明显。
正确做法是同步设置逻辑尺寸与物理像素：
- 初始化时直接写 HTML：
<canvas id="game" width="800" height="600"></canvas> - 或 JS 动态适配：
canvas.width = 800 * window.devicePixelRatio; canvas.height = 600 * window.devicePixelRatio; - 再用
canvas.style.width = "800px"; canvas.style.height = "600px"控制显示比例
clearRect 和 beginPath 是释放上下文状态的关键操作
clearRect 清除像素，beginPath 重置路径栈——这两步缺一不可。只清像素不重置路径，会导致新图形意外连接旧路径终点；只重置路径不清像素，旧帧残留拖影。常见错误是动画循环里漏掉 ctx.beginPath()，结果每次 lineTo 都从上一帧终点开始画线，路径越连越长。
典型安全循环结构：
- 每帧开头：
ctx.clearRect(0, 0, canvas.width, canvas.height) - 绘制前必加：
ctx.beginPath()（尤其涉及moveTo/lineTo/arc时） - 避免在循环中反复设置
ctx.fillStyle等属性，按样式分组批量绘制更省 CPU
多层 Canvas 分离动静内容能显著降低重绘压力
单 Canvas 全量重绘是性能瓶颈根源：背景、UI、动态角色全挤在一个缓冲区里，哪怕只有角色移动，也要清全屏再重画所有图层。改用多个 canvas 元素叠放，CSS 定位对齐，各自独立管理：
- 静态层（地图、UI 框架）：初始化后只绘一次，后续完全不重绘
- 动态层（角色、粒子）：只清局部区域 + 重绘变化对象，
clearRect范围可精准控制 - 注意
z-index和pointer-events: none配合，避免 UI 层拦截鼠标事件
真正容易被忽略的是：离屏缓存不是“多建一个 canvas 就行”，而是要把静态内容预先绘制到 OffscreenCanvas 或普通 canvas，再用 drawImage 贴图——否则只是多开了内存，没减少 CPU 绘制调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
