Canvas getContext("2d") 返回 null 是因 DOM 未就绪、canvas 缺 width/height 属性、标签错误或上下文类型大小写/空格错误；需确保脚本在元素后执行、显式设宽高、检查拼写及大小写。
Canvas getContext("2d") 返回 null 怎么办
调用 getContext("2d") 得到 null，说明 Canvas 元素没准备好，或者上下文类型写错了。最常见的是 DOM 节点还没加载完就执行 JS，或者 Canvas 标签本身缺失 width/height 属性（部分浏览器会拒绝初始化）。
- 确保脚本在
<canvas></canvas>元素之后执行，或包裹在DOMContentLoaded里 - 检查 HTML 中
<canvas id="myCanvas"></canvas>是否有闭合、拼写错误 - 显式设置
width和height属性（不是 CSS 样式），例如：<canvas width="400" height="300"></canvas> -
getContext("webgl")或getContext("2d")大小写敏感，别写成"2D"或"2d "（带空格）
fillRect 和 strokeRect 画出来是黑块或看不见
黑块通常是因为没设颜色；看不见则多因坐标超界、透明度为 0、或 canvas 像素比被缩放后失真。Canvas 绘图依赖当前上下文状态，不设颜色就用默认黑色填充、默认 1px 黑色描边——但若 fillStyle 是 "transparent" 或 "rgba(0,0,0,0)"，就会“画了等于没画”。
- 画前必须设置
ctx.fillStyle（填充）或ctx.strokeStyle（描边），比如：ctx.fillStyle = "#f00" - 确认坐标在 canvas 画布范围内：
fillRect(0, 0, 100, 100)是安全的；fillRect(-100, -100, 200, 200)可能只显示四分之一 - 避免仅靠 CSS 缩放 canvas（如
style="width:400px;height:300px"），这会拉伸像素导致模糊甚至内容偏移；应直接改width/height属性
drawImage 图片不显示或位置错乱
drawImage 是最易出错的 API 之一：图片未加载完成就调用、参数顺序混淆、坐标系理解偏差都会导致白屏或错位。它有 3 种参数签名，传错数量或类型不会报错，只会静默失败。
- 务必等图片加载完成再绘图：
img.onload = () => ctx.drawImage(img, 0, 0)；不要在new Image()后立刻调用 - 记住三参数形式是
drawImage(img, dx, dy)，五参数是drawImage(img, sx, sy, sw, sh, dx, dy)——中间五个是“源区域”，最后两个是“目标位置”，别把sx当成目标 x - Canvas 坐标原点在左上角，y 向下增长；如果图片从顶部裁切异常，检查
sy是否为负或超出图片高度 - 跨域图片（如 CDN 地址）需设置
img.crossOrigin = "anonymous"，否则drawImage会静默失败且无法读取像素
clearRect 清不干净或留残影
clearRect 只清指定矩形区域，不是重置整个 canvas 状态。所谓“清不干净”，往往是没覆盖全部区域，或清完又立刻用旧状态重绘——尤其是没重置 globalAlpha、transform 等上下文属性时。
立即学习“前端免费学习笔记（深入）”；
- 清全屏用
ctx.clearRect(0, 0, canvas.width, canvas.height)，别漏掉canvas.width/height动态值 - 清除后若仍有残留，检查是否用了
save()/restore()但没配对，或transform没重置（可用setTransform(1,0,0,1,0,0)强制还原） - 动画循环中，
clearRect必须在每帧绘制前调用；如果先 draw 再 clear，上一帧就永远留在那里 - 高 DPI 屏幕下，若 canvas 的
width/height未按window.devicePixelRatio缩放，clearRect清的只是逻辑像素，物理像素仍可能残留
Canvas 不保存图形对象，只存像素；所有“状态”都靠上下文变量维持，而这些变量一旦设错或遗漏，问题就藏得深、复现难。动手前先确认 ctx 存在、图片加载完毕、坐标在界内、颜色已设置——这四件事卡住 80% 的新手问题。
