ispointinpath常返回false，因它仅对当前未消耗的路径有效，fill/stroke或beginpath后路径即清空；且需将鼠标坐标转为canvas像素坐标，并注意transform影响。
isPointInPath 为什么经常返回 false
isPointInPath 不是“自动记住”你画过的图形，它只对**当前路径（current path）** 有效，而且这个路径在每次 beginPath() 后就清空了。如果你画完图形后没立刻调用 isPointInPath，或者中间执行了其他绘图操作（比如又调用了 fill()、stroke() 或另一个 beginPath()），路径就丢了——这时无论点在哪，都返回 false。
常见错误写法：
ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.fill(); // ← 这里路径已被消耗（部分浏览器会清空） console.log(ctx.isPointInPath(110, 110)); // ❌ 很可能 false
正确做法是：路径构建完、尚未 fill/stroke 前立即判断：
ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); // ✅ 立即判断，路径还在 console.log(ctx.isPointInPath(110, 110)); // true ctx.fill(); // 再渲染
鼠标坐标必须转成 Canvas 坐标系
鼠标事件的 clientX/clientY 是相对于视口的，而 isPointInPath 要的是相对于 <canvas></canvas> 元素左上角的坐标（且受 CSS 缩放、外边距、滚动影响）。直接传入必然错位。
关键步骤：
- 用
canvas.getBoundingClientRect()获取 canvas 在视口中的真实位置 - 减去
left和top，再考虑devicePixelRatio（如果 canvas 有高清适配） - 忽略 CSS
transform（isPointInPath不感知 CSS 变换）
简明转换函数：
function getCanvasPoint(canvas, event) {
const rect = canvas.getBoundingClientRect();
const x = (event.clientX - rect.left) * (canvas.width / rect.width);
const y = (event.clientY - rect.top) * (canvas.height / rect.height);
return { x, y };
}
注意：rect.width/height 是 CSS 尺寸，canvas.width/height 是实际像素尺寸——这个比例才是正确的缩放因子。
多个图形时怎么分别判断
isPointInPath 只能判断「当前路径」，不能批量管理图形。你要么重复构建每个图形的路径并逐个判断，要么用更可控的方式封装。
推荐结构（避免路径污染）：
- 为每个可点击图形定义一个绘制函数（如
drawCircle(ctx, cx, cy, r)） - 另写一个同名的
hitTest函数，内部复用相同参数重新调用beginPath()+ 路径命令 - 不要依赖之前
fill()过的路径——每次都重绘路径再测
示例：
function drawTarget(ctx, x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
}
<p>function hitTestTarget(x, y, cx, cy, r) {
ctx.beginPath();
ctx.arc(cx, cy, r, 0, Math.PI * 2);
return ctx.isPointInPath(x, y);
}</p><p>canvas.addEventListener('click', e => {
const p = getCanvasPoint(canvas, e);
if (hitTestTarget(p.x, p.y, 100, 100, 50)) {
console.log('击中靶心');
}
});</p>
fillStyle/strokeStyle 不影响 isPointInPath 判断
有人误以为设置 fillStyle = 'transparent' 或 strokeStyle = 'rgba(0,0,0,0)' 会影响命中检测——其实完全不影响。isPointInPath 只看路径几何形状（是否闭合、是否包含该点），和颜色、透明度、是否填充/描边无关。
但要注意：isPointInPath 默认使用「非零环绕规则（nonzero）」，对自相交路径或复合路径（如 clip() 后的区域）行为复杂。简单圆形、矩形、多边形基本没问题；如果图形由多次 moveTo/lineTo 构成且方向混乱，结果可能不符合直觉。
真正容易被忽略的是：canvas 的 transform（如 scale、rotate）会影响路径坐标，但 isPointInPath **不自动应用当前变换矩阵**。也就是说，如果你先 ctx.scale(2, 2)，再画圆，那么路径实际在缩放后的坐标系里；此时传入的点坐标也必须是已按同样 scale 换算过的——否则判断失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
