Canvas绘图需先获取2D上下文ctx=canvas.getContext('2d')；绘图前须设置fillStyle/strokeStyle样式；路径操作须用beginPath()重置；width/height属性决定分辨率，CSS仅控制显示尺寸；交互需手动计算像素级逻辑。
Canvas 元素本身不支持直接绘图，必须通过 getContext('2d')
HTML 的 <canvas> 只是一个空的位图画布容器，没有内置绘图能力。你得先用 getContext('2d') 获取 2D 渲染上下文，它才是真正的绘图接口。漏掉这一步，所有绘图调用（比如 fillRect）都会静默失败或报错 TypeError: ctx.fillRect is not a function。
常见错误写法：
const canvas = document.getElementById('myCanvas');
canvas.fillRect(10, 10, 100, 50); // ❌ 报错：fillRect 不是 canvas 的方法正确写法：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // ✅ 必须这一步
ctx.fillRect(10, 10, 100, 50); // ✅ 现在可以了绘制图形前必须设置样式，fillStyle 和 strokeStyle 默认是黑色
fillRect、fill() 用 fillStyle，strokeRect、stroke() 用 strokeStyle。不显式设置的话，它们都默认为 '#000000'（纯黑），容易误以为“没画出来”，其实是画了但颜色和背景一样。
立即学习“Java免费学习笔记（深入）”；
-
fillStyle支持颜色字符串（'red'）、十六进制（'#ff6b35'）、rgb（'rgb(255, 107, 53)'）、rgba（'rgba(255, 107, 53, 0.7)'）甚至渐变/图案 -
strokeStyle同理，但只影响描边，不影响填充 - 注意：这些属性是上下文状态，会持续生效，直到被再次赋值
示例（避免“看不见”的坑）：
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 128, 255, 0.8)';
ctx.fillRect(20, 20, 80, 40);
ctx.strokeStyle = '#e74c3c';
ctx.lineWidth = 3;
ctx.strokeRect(20, 20, 80, 40);路径操作要配对使用 beginPath() 和 closePath()，否则旧路径会累积
Canvas 是基于状态的绘图模型，不是声明式。所有路径命令（moveTo、lineTo、arc 等）都作用于当前路径。如果不手动清空，多次调用 fill() 或 stroke() 会重复绘制之前所有路径，造成意外重叠或性能下降。
-
beginPath()重置当前路径（清空点序列） -
closePath()是可选的：自动连线到起点，形成闭合区域；但fill()即使不闭合也会自动封闭再填充 - 漏掉
beginPath()是高频 bug 来源，尤其在循环绘图或动画中
错误示范（画两个圆，第二个变大且有双轮廓）：
ctx.arc(50, 50, 20, 0, Math.PI * 2); ctx.fill(); // 第一个圆 ctx.arc(100, 50, 30, 0, Math.PI * 2); ctx.fill(); // 第二个圆 → 实际画了两个弧！
正确写法：
ctx.beginPath(); ctx.arc(50, 50, 20, 0, Math.PI * 2); ctx.fill(); <p>ctx.beginPath(); ctx.arc(100, 50, 30, 0, Math.PI * 2); ctx.fill();
Canvas 绘图不可响应式缩放，width/height 属性和 CSS 尺寸必须区分
Canvas 的实际绘图分辨率由 HTML 属性 width 和 height 决定（单位：像素），而 CSS 的 width/height 只控制显示尺寸。如果只用 CSS 缩放，图像会模糊、锯齿，因为底层像素没变多。
- 响应式做法：监听窗口变化，用 JS 重设
canvas.width和canvas.height，再重绘 - 不要写
<canvas style="width:100%; height:400px">却不改属性值 - 获取设备像素比（
window.devicePixelRatio）可提升高清屏清晰度，但需额外缩放坐标
基础适配示例：
function resizeCanvas() {
const dpr = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
ctx.scale(dpr, dpr); // 坐标系同步缩放
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas(); // 初始化Canvas 的交互本质是「你完全掌控像素」，没有 DOM 那样的事件冒泡或自动布局。所有点击判断、动画更新、状态管理都要自己算——比如检测鼠标是否在某个自绘圆形内，得用距离公式，而不是加 onclick。这点最容易低估复杂度。
