canvas绘图失败、事件无响应的三大主因：未调用getcontext("2d")获取绘图上下文；width/height误设为css样式而非html属性；点击坐标未通过getboundingclientrect()换算。
canvas 元素本身不绘图，也不响应事件——绑定失败、图形不出现、点击没反应，90% 是卡在三件事上：没调 getContext("2d")、width/height 属性写在了 CSS 里、事件坐标没换算。
为什么 canvas.getContext("2d") 不可跳过
它不是“初始化”，而是获取唯一绘图手柄。漏掉这句，fillRect()、stroke()、fillText() 全部静默失效，控制台零报错，容易误以为代码没跑。
- 必须在 DOM 加载完成后执行，比如放在
window.addEventListener("load", ...)或document.getElementById之后 - 同一
canvas多次调用getContext("2d")返回的是同一个对象，不是新实例，可安全复用 - 别传错字符串：
"2d"（带引号），不是2d或"2D"
width 和 height 必须写在 HTML 属性里
CSS 的 width/height 只缩放显示，不改变底层像素网格。结果是：你画了个正圆，它被拉成椭圆；你设了 fillRect(0, 0, 100, 100)，实际渲染却糊成一片。
- 正确写法：
<canvas id="myCanvas" width="800" height="600"></canvas> - 错误写法：
<canvas id="myCanvas" style="width:800px;height:600px"></canvas> - 响应式场景下，可用 JS 动态重设：
canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;，再调ctx.scale(devicePixelRatio, devicePixelRatio)补偿高清屏
绘制前不调 beginPath() 会导致路径意外连接
CanvasRenderingContext2D 的路径是累积的。上次画到 (100, 100)，这次 lineTo(200, 50) 就会从 (100, 100) 连过去——折线图变乱麻，饼图扇形粘连，bug 难定位。
- 每次画独立形状（如一个按钮、一个图标）前，都应显式调
ctx.beginPath() -
fillRect()、strokeRect()是原子操作，不依赖路径，无需beginPath() - 画多边形时，用
closePath()显式闭合比靠自动连线更可控
canvas 点击事件绑定要手动换算坐标
直接写 canvas.onclick = handler 或 addEventListener("click", ...) 能绑上，但回调里拿到的 event.clientX/clientY 是视口坐标，和 canvas 内部绘图坐标系完全不一致。
- 必须用
canvas.getBoundingClientRect()获取 canvas 左上角在视口中的真实位置 - 换算公式固定两行：
const x = (e.clientX - rect.left) * (canvas.width / rect.width);，const y = (e.clientY - rect.top) * (canvas.height / rect.height); - 移动端需额外监听
touchstart，并取e.touches[0].clientX，且记得e.preventDefault()防止滚动
最易忽略的其实是「状态顺序」：颜色、线宽、字体这些属性，必须在对应绘图命令（fill()、stroke()、fillText()）之前设置，写在后面就白写了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
