必须先获取 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></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></script>放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
