canvas.getContext(‘2d’) 返回 NULL 主因是 canvas 元素未加载进 dom，需确保在 DOMContentLoaded 后获取，检查 ID 是否拼写正确且元素存在，css 隐藏不影响 getContext。
canvas.getContext(‘2d’) 返回 null 怎么办
直接调用 getContext('2d') 返回 null，基本只有一种可能： 元素还没加载进 DOM。比如脚本写在 里，或者没等 DOMContentLoaded 就执行了。
- 确保 DOM 加载完成后再获取 canvas，推荐用
document.addEventListener('DOMContentLoaded', ...) - 检查 html 中是否漏写了
，或 ID 拼写错误（比如写成myCanvs） - 确认 canvas 元素没有被 CSS 设置为
display: none或visibility: hidden—— 这不影响获取 context，但会影响渲染可见性
drawImage() 动态加载图片时黑屏或不显示
drawImage() 不会自动等待图片加载完成。如果传入一个 src 还没加载完，就会画出空白或报错 DOMException: The image argument is a canvas element with a width or height of 0。
- 必须监听
img.onload，在回调里调用drawImage() - 避免重复绑定 onload —— 如果 img 已经加载完成，onload 不会触发，可用
img.complete判断 - 动态生成图像常用套路：
const img = new Image(); img.src = 'avatar.png'; img.onload = () => { ctx.drawImage(img, 0, 0); };
requestAnimationFrame 里清空画布的正确顺序
动画循环中，清空画布（clearRect()）的位置错了，会导致残留、闪烁或性能浪费。
- 每次帧开始时第一件事就是清空：先
ctx.clearRect(0, 0, canvas.width, canvas.height)，再画新内容 - 不要用
canvas.width = canvas.width清屏 —— 它会重置所有上下文状态（如 fillStyle、lineWidth），副作用太大 - 如果只动局部区域，可只清对应矩形区域，减少 GPU 填充压力；但全屏动画建议整屏清
- 注意 canvas 的
width/height是绘图表面分辨率，不是 CSS 显示尺寸；缩放靠 CSS 会导致模糊，应同步设置canvas.style.width和canvas.style.height
toDataURL() 导出透明背景却变成黑色
toDataURL() 默认导出 PNG，但若 canvas 本身没设透明背景（比如用 fillRect() 盖了一层白色），导出后就看不到透明通道。
立即学习“Java免费学习笔记（深入）”；
- 创建 canvas 后，
ctx.fillStyle = 'transparent'并ctx.fillRect(0, 0, w, h)不起作用 ——fillStyle对透明无意义 - 真正要做的，是在绘制前确保 canvas 的合成模式支持 alpha：默认就是，但如果你中间用了
ctx.globalCompositeOperation = 'destination-over'等操作，可能干扰 - 最稳妥方式：导出前手动清空为透明像素
ctx.clearRect(0, 0, canvas.width, canvas.height); // 注意：clearRect 清的是透明 - 导出时显式指定类型：
canvas.toDataURL('image/png')（JPEG 不支持透明）
实际做动态图像时，最容易忽略的是图像加载时机和 canvas 像素比适配 —— 尤其在高清屏上，canvas.width 和 canvas.clientWidth 经常不一致，一不留神就模糊或拉伸。