初始化Canvas 2D上下文需同时满足画布存在、尺寸正确（用width/height属性而非CSS）、执行时机恰当（DOM加载后），否则getContext('2d')返回null。
要在网页中初始化 Canvas 的 2D 绘图上下文，关键不是“写对代码”，而是确保三件事同时成立：画布存在、尺寸正确、执行时机恰当。缺一不可，否则 getContext('2d') 就会返回 null，后续所有绘图命令都静默失效。
HTML 中正确声明 canvas 元素
必须用 width 和 height 属性显式设置像素尺寸，不能只靠 CSS：
- ✅ 正确：
<canvas id="myCanvas" width="600" height="400"></canvas> - ❌ 错误：
<canvas id="myCanvas" style="width:600px; height:400px"></canvas>（会导致图像模糊、坐标错位） - 可加
style="border:1px solid #ccc"方便观察画布边界 - 标签内可写降级文字，如
<canvas ...>您的浏览器不支持 Canvas</canvas>
JavaScript 中安全获取 2D 上下文对象
拿到 ctx 是绘图的前提，需分步验证：
- 先用
document.getElementById('myCanvas')或querySelector获取元素，确认不为null - 检查该元素是否具备有效的
width和height属性值（非 0） - 调用
getContext('2d')，参数必须是小写字符串'2d'，不能是'2D'或带空格 - 建议加上基础判断，避免脚本中断：
const canvas = document.getElementById('myCanvas');<br>if (!canvas || !canvas.width || !canvas.height) {<br> console.error('canvas 元素缺失或尺寸无效');<br> return;<br>}<br>const ctx = canvas.getContext('2d');<br>if (!ctx) {<br> console.error('无法获取 2D 上下文');<br> return;<br>}确保脚本执行时机正确
DOM 必须加载完成，canvas 元素才可用：
立即学习“前端免费学习笔记（深入）”；
- 把
<script></script>标签放在
