isPointInPath()用于判断点是否在路径填充区域内，仅检测填充不包含描边，支持当前路径状态调用或传入Path2D对象，遵循非零环绕规则，默认不包含边界线。
Canvas 的 isPointInPath() 方法用于判断指定坐标点是否落在当前路径（或指定路径）的填充区域内。它不检测描边，只针对填充逻辑（包括非零环绕规则和奇偶规则），是实现图形交互（如点击热区、悬停反馈）的关键工具。
基础用法：依赖当前路径状态
调用前必须已通过 beginPath()、moveTo()、lineTo() 等方法定义好路径，并且尚未调用 stroke() 或 fill()（否则路径可能已被重置）：
- 先绘制路径（不一定要 fill/stroke）
- 再调用
ctx.isPointInPath(x, y) - 返回
true表示点在填充区域内部
例如：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(50, 50, 100, 80); // 绘制一个矩形路径
console.log(ctx.isPointInPath(80, 70)); // true（点在矩形内）
console.log(ctx.isPointInPath(20, 70)); // false（点在矩形外）
支持路径对象：避免路径状态干扰
HTML5 后期标准支持传入 Path2D 对象，这样无需依赖当前绘图状态，路径可复用、更安全：
立即学习“前端免费学习笔记（深入）”；
- 创建独立路径：
const path = new Path2D(); path.rect(50, 50, 100, 80); - 直接检测：
ctx.isPointInPath(path, x, y) - 适合多次检测同一形状，或在复杂绘图流程中保持上下文干净
注意填充规则与边界情况
isPointInPath() 默认使用「非零环绕规则」（non-zero winding rule），对自交、复合路径（如圆环、星形）判断更符合直觉；也可显式指定 "evenodd" 规则：
ctx.isPointInPath(path, x, y, "evenodd")- 点恰好落在路径线上？结果不确定——该方法只定义「内部」与「外部」，边界不属于填充区域
- 空路径、未闭合路径仍可检测，但逻辑按实际包围区域计算（如未闭合折线按自动闭合处理）
常见误用与建议
- 别在
fill()或stroke()后立即调用——路径可能已被清空，需重新beginPath()+ 构建 - 鼠标事件中使用时，注意坐标需转换为 Canvas 像素坐标（考虑 CSS 缩放、border、padding）
- 高频检测（如拖拽跟随）建议缓存
Path2D实例，避免重复创建路径 - 若需包含描边区域，不能仅靠
isPointInPath，应结合isPointInStroke()或手动扩展检测范围
