canvas坐标系原点在左上角、y轴向下，dom的getboundingclientrect()也以视口左上角为原点，但canvas宽高属性定义像素尺寸，css缩放会导致坐标错位，需用canvas.width/canvas.clientwidth计算缩放比校正。
网页交互动画中，所有位置计算都依赖坐标系统；不理解它的原点、方向和层级关系，动画就会偏移、错位或响应失灵。
HTML 元素定位用的 left / top 坐标系怎么算
这是 CSS position: absolute 或 fixed 时最常用的坐标系：原点在最近的已定位祖先（或视口左上角），left 增大 → 向右，top 增大 → 向下。它和 Canvas、图片热点的坐标方向一致，但参考系不同。
- 如果父容器没设
position: relative，left: 20px就相对于整个视口 -
transform: translate(10px, 10px)的坐标系独立于文档流，不影响其他元素布局 - 滚动时，
top不会随页面滚动变化，但getBoundingClientRect().top会变 - 注意：IE 低版本对
getComputedStyle返回的left值可能带单位（如"20px"），需用parseFloat()解析
getBoundingClientRect() 返回的坐标为什么总在变
这个 API 返回的是元素相对于当前视口（viewport）左上角的矩形信息，不是固定值。滚动、缩放、DOM 变动都会让它刷新。
- 返回对象包含
left、top、right、bottom、width、height - 想转成相对于某个祖先元素的坐标？用
rect.left - ancestorRect.left手动减 - 监听
scroll或resize时别直接缓存getBoundingClientRect()结果，要重新调用 - 在
requestAnimationFrame回调里调用，能避免 layout thrashing
Canvas 绘图坐标和 DOM 坐标怎么对齐
Canvas 的 (0, 0) 在左上角，DOM 的 getBoundingClientRect() 也以左上为原点，但 Canvas 的 width/height 属性定义的是**像素尺寸**，不是 CSS 尺寸 —— 这是最常翻车的地方。
- 别用 CSS 设置
canvas宽高：style="width: 600px; height: 400px"会拉伸画面，坐标全乱 - 正确做法：用 HTML 属性
width="600" height="400"，再用 CSS 控制显示大小（如max-width: 100%），并按比例缩放鼠标坐标 - 鼠标点击 Canvas 时，真实坐标 =
event.clientX - canvas.getBoundingClientRect().left，再乘缩放比：scaleX = canvas.width / canvas.clientWidth - Canvas 内部绘图用整数坐标更稳，小数坐标可能触发抗锯齿导致模糊
图片热点区域 <area coords> 的坐标怎么测准
<area> 的 coords 值必须对应原始图片像素尺寸，不是浏览器渲染后的尺寸。放大、缩放、响应式图片都会让 coords 失效。
- 用 Photoshop 或 VS Code 插件（如 “Image Preview”）打开原图，用标尺工具量出像素坐标
- 矩形
coords="x1,y1,x2,y2"是左上 + 右下，不是宽高；圆形coords="cx,cy,r"半径是像素值 - 多边形点顺序必须顺时针或逆时针闭合，否则部分浏览器（如旧版 Safari）不识别
- 调试时加
border: 1px solid red到<img>上，肉眼比对热点是否贴合图形边缘
坐标系统本身不复杂，麻烦在于它在不同上下文里悄悄切换参考系和单位 —— DOM、CSS、Canvas、<map></map> 各自一套规则，混用前务必确认当前坐标的“谁的左上角、按什么单位、是否受缩放影响”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
