必须先获取 canvas 的 2D 绘图上下文，否则后续绘图操作会报错或静默失败；需确保 DOM 加载完成、canvas 元素存在、getContext('2d') 非 null，并正确设置 width/height 属性而非 CSS 样式。
如何获取 canvas 的 2D 绘图上下文
没拿到 getContext('2d')，后续所有绘图操作都会报错或静默失败。这是最常卡住的第一步。
- 必须等 DOM 加载完成再获取 canvas 元素，否则
document.getElementById()返回null -
getContext('2d')返回值可能为null（比如浏览器不支持、canvas 尺寸为 0、或传入了错误字符串如'3d'）——务必做非空判断 - 不要在
<canvas>标签内写内联 HTML 内容来“占位”，它不会影响绘图，但可能干扰 JS 获取元素
为什么 canvas 宽高不能用 CSS 设置
用 style="width: 400px; height: 300px" 看起来放大了 canvas，实际是拉伸画布像素，导致图形模糊、坐标错乱。
- 正确的做法是直接设置 canvas 的
width和height属性（单位是像素，不是 CSS 像素） - 如果需要响应式，得用 JS 动态重设
canvas.width和canvas.height，再重新绘制 - 获取当前绘图区域尺寸，请读取
canvas.width/canvas.height，而非canvas.clientWidth/canvas.clientHeight
script 标签该放哪儿才安全
脚本执行时机不对，getContext 就拿不到 canvas 实例。
- 最稳妥：把
<script>放在</body>前，确保 DOM 已就绪 - 或者用
DOMContentLoaded事件包裹初始化逻辑 - 避免放在
<head>里又不加defer或事件监听——此时document.getElementById()找不到元素 - 不需要用
window.onload，它等所有资源（图片、样式表）加载完，太晚
常见“画不出东西”的原因排查
代码没报错，但 canvas 一片空白，大概率是以下某条没满足。
立即学习“前端免费学习笔记（深入）”；
- 忘记调用
beginPath()就直接stroke()或fill()—— 路径为空，什么也不画 - 设置了
fillStyle但用了stroke()，或反之；颜色值写成'#fff'（缺两位）或'rgb(255,255,255'（括号没闭合） - 坐标超出 canvas 范围（比如
moveTo(1000, 1000)），且没调用clip()，图形被裁掉但无提示 - canvas 元素本身被其他 CSS 隐藏（
display: none或visibility: hidden），即使 JS 正常执行也看不到
