Canvas 不是 SVG 的平替，也不具备内置区域映射能力；响应点击需手动校准坐标：先用 getBoundingClientRect() 获取画布视口位置，再计算相对偏移，最后按缩放比还原为绘图坐标系。
Canvas 不是 SVG 的平替，也不是“更轻量的 DOM”；它没有内置区域映射能力，所有坐标响应都得手动算。想让 Canvas 里画的一个圆响应点击？不能靠 onclick 或 CSS ::before，必须走 getBoundingClientRect() + 像素换算 + 几何判定这一整套流程。
Canvas 点击区域失效的典型表现
你画了个矩形，鼠标点上去没反应，或者点在左边却触发了右边的逻辑——这几乎一定是坐标没对齐。根本原因不是代码写错，而是默认把视口坐标当成了画布坐标。
-
event.clientX和event.clientY是相对于整个页面的，而ctx.fillRect(100, 100, 50, 50)的 (100, 100) 是相对于 canvas 左上角的像素位置 - 如果 canvas 有
margin、border，或被 CSS 缩放（比如style="width: 400px; transform: scale(0.5)"），直接相减会偏移几十甚至上百像素 - 高清屏（
devicePixelRatio > 1）下，若没同步设置canvas.width/canvas.height，getBoundingClientRect().width和canvas.width就不等，除法换算就失真
SVG 的区域映射为什么“开箱即用”
SVG 元素（如 <circle>、<path>）天然绑定事件，click 直接落在图形上，连 pointer-events 都能细粒度控制填充/描边/无响应。但它的“自动”是有前提的：
- 必须用
viewBox而非仅靠 CSS 缩放，否则内部坐标系会塌缩（例如<circle cx="10" cy="10" r="5">在 2x 屏上物理尺寸可能只剩 2.5px） -
preserveAspectRatio="xMidYMid meet"是安全缩放的底线，漏掉会导致拉伸变形 - SVG 内部坐标是矢量单位，不随分辨率变化，但点击热区仍受最终渲染尺寸影响——48px 最小可点击区域规范依然适用
Canvas 中实现可靠点击区域的三步校准
别试图绕过这三步，少一步，坐标就漂移。核心就是把鼠标点从“屏幕像素”一步步还原成“业务逻辑坐标”。
立即学习“前端免费学习笔记（深入）”；
- 第一步：用
canvas.getBoundingClientRect()拿到 canvas 左上角在视口中的真实像素位置（含 margin/border） - 第二步：计算相对偏移
x = event.clientX - rect.left、y = event.clientY - rect.top - 第三步：还原为 canvas 像素坐标：
realX = x * (canvas.width / rect.width)、realY = y * (canvas.height / rect.height)（注意：这里除的是rect.width，不是 CSSstyle.width）
做完这三步，你拿到的 (realX, realY) 才真正对应 ctx 绘图时的坐标系，才能用 isPointInPath()、射线法或多边形绕数法做判定。
Canvas 与 SVG 混用时的指针穿透陷阱
常见需求：SVG 做图标按钮层，Canvas 做底层绘图区域，两者重叠。这时 pointer-events 必须显式协调，否则要么全点不中，要么全点透底。
- 想让 SVG 按钮响应点击，Canvas 当背景：给 canvas 加
style="pointer-events: none"，SVG 默认即可 - 想让 Canvas 接收点击，SVG 图标仅作装饰：给 SVG 容器加
pointer-events: none，但注意子元素如<text>会继承，需单独设回auto - DOM 元素（如
<div>提示框）盖在 Canvas 上时，若要 Canvas 仍能捕获事件，不能只靠z-index，必须确保该 DOM 的pointer-events是none
Canvas 自身没有“事件冒泡链”，也没有“父容器截断”，它的事件是否触发，只取决于 pointer-events 设置和鼠标是否落在其 CSS 边界内——哪怕内容是空的，只要边界存在，就占事件通道。
