canvas.getcontext('2d')返回null的主因是dom未就绪、canvas尺寸为0、被重复获取其他上下文（如webgl）、css隐藏或非canvas元素；应检查id拼写、执行时机、元素类型及浏览器支持。
canvas.getContext('2d') 返回 null 怎么办
直接调用 getContext('2d') 报错或返回 null，大概率是 DOM 元素还没加载完成。Canvas 元素必须已挂载到文档中，且不能是隐藏状态（比如 display: none 或父元素不可见）。
- 确保脚本在
<canvas></canvas>标签之后执行，或包裹在DOMContentLoaded事件里 - 检查元素是否被 CSS 隐藏：用
getComputedStyle(canvas).display !== 'none'快速验证 - 若 canvas 是动态插入的（如通过
innerHTML），需确认插入后才调用getContext - 注意不要重复调用
getContext创建多个上下文——它不支持多次初始化，第二次会静默失败
requestAnimationFrame 渲染循环卡顿或掉帧
用 requestAnimationFrame 做动画时，帧率不稳定，常见原因是绘制逻辑太重、频繁创建对象或未清除上一帧。
- 每帧开始前务必调用
ctx.clearRect(0, 0, canvas.width, canvas.height)，否则旧图形残留导致视觉拖影 - 避免在循环内反复调用
new Image()、JSON.parse()或字符串拼接大量内容 - 路径绘制尽量复用
Path2D对象：const path = new Path2D(); path.rect(...); ctx.stroke(path);比重复调用beginPath() + rect() + stroke()更快 - 如果只是移动/缩放图形，优先用
ctx.setTransform()重置变换矩阵，而不是清空+重绘整个场景
Canvas 绘制后模糊或像素错位
图形边缘发虚、线条粗细不一致、文字锯齿严重，基本是设备像素比（window.devicePixelRatio）没适配。
- 获取 canvas 实际渲染尺寸时，不能只读
canvas.width/canvas.height，要同时设置 CSS 宽高和真实缓冲尺寸：
const dpr = window.devicePixelRatio || 1; canvas.width = canvas.clientWidth * dpr; canvas.height = canvas.clientHeight * dpr; ctx.scale(dpr, dpr);
ctx.font = '16px sans-serif'），避免 16.3px 这类值触发亚像素渲染ctx.lineTo(x + 0.5, y + 0.5)，否则可能被两个物理像素分摊而变灰Canvas 导出图片时透明背景变黑
调用 canvas.toDataURL('image/png') 后打开是黑底，说明导出时 alpha 通道被错误处理了——PNG 默认支持透明，但某些环境（如部分微信 WebView）或误用 toBlob 回调参数会导致降级。
- 确认导出格式是
'image/png'，不是'image/jpeg'（JPEG 不支持透明） - 若用
toBlob，回调函数第二个参数必须显式传'image/png'：canvas.toBlob(cb, 'image/png') - 检查 canvas 是否被其他 canvas 或图像以
globalCompositeOperation = 'destination-over'类型叠加过，这可能污染 alpha 通道 - 导出前可手动补一层透明底：
ctx.globalAlpha = 0; ctx.fillStyle = '#000'; ctx.fillRect(0, 0, w, h); ctx.globalAlpha = 1;（仅调试用）
Canvas 的动态渲染真正难的不是“画出来”，而是“每次画得准、画得快、画得稳”。设备像素比、帧同步时机、内存生命周期——这些细节不显眼，但漏掉一个，图形就可能糊、跳、闪、崩。
