CanvasRenderingContext2D: isPointInPath() 方法

基线广泛可用

此功能已经很成熟，并且在许多设备和浏览器版本上都能正常工作。它从 2015 年 7 月.

报告反馈

语法

Canvas 2D API 的 CanvasRenderingContext2D.isPointInPath() 方法报告指定点是否包含在当前路径中。

isPointInPath(x, y)
isPointInPath(x, y, fillRule)
isPointInPath(path, x, y)
isPointInPath(path, x, y, fillRule)

js

参数

要检查的点的 x 轴坐标，不受上下文当前变换的影响。

要检查的点的 y 轴坐标，不受上下文当前变换的影响。

fillRule

用于确定点在路径内部还是外部的算法。可能的值: nonzero
非零绕线规则。默认规则。: evenodd

奇偶绕线规则。

path

要检查的 `Path2D` 路径。如果未指定，则使用当前路径。

返回值: 布尔值

示例

布尔值，如果指定点包含在当前路径或指定路径中，则为 `true`，否则为 `false`。

检查当前路径中的点

HTML

此示例使用 isPointInPath() 方法检查点是否在当前路径内。

<canvas id="canvas"></canvas>
<p>In path: <code id="result">false</code></p>

JavaScript

Canvas 2D API 的 CanvasRenderingContext2D.isPointInPath() 方法报告指定点是否包含在当前路径中。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const result = document.getElementById("result");

ctx.rect(10, 10, 100, 100);
ctx.fill();
result.innerText = ctx.isPointInPath(30, 70);

html

结果

检查指定路径中的点

HTML

此示例使用 isPointInPath() 方法检查点是否在当前路径内。

<canvas id="canvas"></canvas>

JavaScript

Canvas 2D API 的 CanvasRenderingContext2D.isPointInPath() 方法报告指定点是否包含在当前路径中。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Create circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle);

// Listen for mouse moves
canvas.addEventListener("mousemove", (event) => {
  // Check whether point is inside circle
  const isPointInPath = ctx.isPointInPath(circle, event.offsetX, event.offsetY);
  ctx.fillStyle = isPointInPath ? "green" : "red";

  // Draw circle
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fill(circle);
});