<p>Canvas的y轴向下为正因其原点在左上角，与数学坐标系相反；需在数据层转换坐标（如canvasY = height - logicalY），鼠标事件须用getBoundingClientRect()校准，setTransform()可安全实现局部坐标系切换。</p>
canvas 的 y 轴为啥是反的？
Canvas 坐标系原点在左上角，y 轴向下为正——这和数学直角坐标系（原点居中、y 向上）冲突，也和 SVG、CSS transform 默认行为不一致。所有图形定位、鼠标映射、动画计算都绕不开这个前提。
常见错误现象：ctx.fillRect(10, 10, 20, 20) 画出来在顶部，但你“以为”它该在底部；鼠标点击位置算出的 y 值比预期小很多；用 Math.sin() 绘制波形时图像上下颠倒。
- 别试图靠
ctx.scale(1, -1)全局翻转——后续所有文本、图像、阴影都会被镜像，fillText字母倒置，drawImage纹理翻转，维护成本陡增 - 真正安全的做法：只在数据层做转换，绘制前统一把业务坐标（比如“第 3 行、第 5 列”或“地理经纬度”）映射成 canvas 像素坐标
- 记住公式：
canvasY = height - logicalY（适用于逻辑坐标原点在左下角的场景），或更通用的：canvasY = originY + (logicalY - logicalOriginY) * scale
鼠标事件坐标怎么对齐 canvas 内部绘图？
直接用 event.clientX / event.clientY 会错——它们基于视口，而 canvas 可能有 margin、border、缩放（transform: scale()）、滚动偏移。
常见错误现象：鼠标悬停在圆心，但计算出的坐标却落在圆外；canvas 宽高设为 100%，但 getBoundingClientRect() 返回值和 canvas.width/canvas.height 不匹配。
立即学习“前端免费学习笔记（深入）”；
- 必须用
canvas.getBoundingClientRect()获取 canvas 左上角在视口中的真实像素位置 - 再减去它得到相对坐标：
const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; - 如果 canvas 设置了 CSS
width/height（比如width: 600px），但canvas.width是 600（或 1200），注意像素比：const dpr = window.devicePixelRatio || 1; const realX = (x * (canvas.width / rect.width)) / dpr;—— 这步漏掉会导致高清屏下定位漂移
用 setTransform() 做局部坐标系切换靠谱吗？
靠谱，而且是 canvas 原生支持的最干净的方案，比手动加减乘除更易读、可复用、不影响其他绘制。
使用场景：画仪表盘（原点在表盘中心）、地图瓦片（原点在左上角但需平移缩放）、游戏角色局部坐标（角色自身朝向为 x 轴）。
-
ctx.setTransform(a, b, c, d, e, f)直接重置变换矩阵，不叠加；想叠加用ctx.transform() - 常用组合：
ctx.setTransform(1, 0, 0, 1, offsetX, offsetY)平移；ctx.setTransform(scale, 0, 0, scale, 0, 0)缩放；ctx.setTransform(1, 0, 0, -1, 0, height)翻转 y 轴（仅限当前绘制块） - 关键提醒：调用
setTransform()后，所有后续绘制（包括fillText、strokeRect）都走新坐标系，但路径定义（moveTo、lineTo）仍按新坐标解释——所以它不是“画布变形”，而是“坐标系重定义”
SVG 或 CSS 坐标转 canvas 怎么避免失准？
不能直接套用数值。SVG 的 viewBox、CSS 的 transform-origin、canvas 的 devicePixelRatio 三者叠加，会让同一组数字在不同环境里落点完全不同。
性能影响：每次重算坐标本身开销极小，但若在动画帧里反复调用 getBoundingClientRect() 或未缓存 scale 值，可能触发强制同步布局（layout thrashing）。
- 把 SVG 的
viewBox="0 0 800 600"映射到 canvas 的width=800、height=600时，x 直接对应，y 需要转换：canvasY = 600 - svgY - CSS 中
transform: translate(100px, 200px)作用于 canvas 元素时，不影响内部绘图坐标，只影响 canvas 在页面中的位置——所以鼠标映射仍要先减getBoundingClientRect().left/top - 最易忽略的一点：canvas 的
width和height属性是绘图缓冲区大小，CSSwidth/height是显示尺寸。二者比例不一致时，所有坐标都要按canvas.width / rect.width比例缩放，否则图形拉伸、点击错位
事情说清了就结束。坐标转换本身不难，难的是每次都要问一句：这个坐标，是谁的坐标？
