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() 或手动扩展检测范围

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！