canvas标签本身不绘图，仅提供像素级空白画布；所有绘制必须通过JavaScript调用getContext('2d')获取上下文操作，否则为空白透明区域；width/height须设为HTML属性而非CSS，否则导致拉伸模糊与坐标错乱。
canvas 标签本身不绘图，它只是提供一块像素级画布区域；所有图形、动画、交互都必须通过 JavaScript 调用 getContext('2d') 获取上下文后操作——没这一步，canvas 就是透明的空盒子。
为什么 canvas.width/height 不能用 CSS 设置
用 CSS（比如 style="width: 400px; height: 300px;"）缩放 canvas 元素，只会拉伸像素，导致图形模糊、坐标错乱、鼠标事件偏移。真正控制分辨率的是 HTML 属性 width 和 height，它们定义的是画布的**内在像素尺寸**。
- 正确写法：
<canvas id="myCanvas" width="800" height="600"></canvas> - 错误写法：
<canvas id="myCanvas" style="width: 800px; height: 600px;"></canvas>（此时实际渲染缓冲区仍是默认 300×150） - 响应式场景下，应监听窗口变化，用 JS 动态重设
canvas.width和canvas.height，再重绘
getContext('2d') 返回的对象才是绘图主体
getContext('2d') 不是“开启画笔”，而是返回一个状态机式的绘图上下文对象——它维护着颜色、线宽、变换矩阵、裁剪路径等全部绘图状态。每次调用 fill() 或 stroke() 都依赖当前状态，状态污染是新手最常踩的坑。
- 路径必须显式开始：
ctx.beginPath()，否则多次调用arc()或lineTo()会累积进同一条路径 - 填充和描边互不影响样式，但共用同一路径：先
fill()再stroke()是常见组合 - 频繁切换
fillStyle/strokeStyle会影响性能，批量绘制同类图形时尽量复用 - 别漏掉
ctx.closePath()，否则多边形可能缺一边
鼠标点击位置怎么映射到 canvas 坐标系
canvas 的坐标原点在左上角，但鼠标事件的 clientX/clientY 是相对于视口的，且受页面缩放、滚动、CSS transform 影响。直接相减会出错。
立即学习“前端免费学习笔记（深入）”；
- 必须用
canvas.getBoundingClientRect()获取实时位置，再做差值计算 - 示例核心逻辑：
const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top;
- 如果 canvas 有 CSS 缩放（如
transform: scale(0.8)），需额外除以缩放系数，否则坐标偏移 - 想判断是否点中某个图形？
ctx.isPointInPath(x, y)只对**最近一次未 consume 的路径**有效，用前必须重走路径（beginPath→ 绘制 →isPointInPath）
canvas 的“简单”是假象——它把所有底层细节都甩给了你：坐标转换要自己算，点击检测要自己写，动画循环要自己搭，状态管理全靠自觉。真正的复杂点不在 API 多少，而在于你得同时当画家、调度员和内存管理员。
