CanvasRenderingContext2D: isPointInStroke() 方法

基线 广泛可用

此功能已得到很好的确立，并且可以在许多设备和浏览器版本中使用。自以下时间起，它已在各个浏览器中可用 2015年7月.

Canvas 2D API 的CanvasRenderingContext2D.isPointInStroke()方法报告指定点是否位于路径描边的包含区域内。

语法

js
isPointInStroke(x, y)
isPointInStroke(path, x, y)

参数

x

要检查的点的 x 轴坐标。

y

要检查的点的 y 轴坐标。

path

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

返回值

布尔值

一个布尔值，如果点位于路径描边的包含区域内，则为true，否则为false。

示例

检查当前路径中的点

此示例使用isPointInStroke()方法检查点是否在当前路径描边的区域内。

HTML

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

JavaScript

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

ctx.rect(10, 10, 100, 100);
ctx.stroke();
result.innerText = ctx.isPointInStroke(50, 10);

结果

检查指定路径中的点

每当您移动鼠标时，此示例都会检查光标是否位于椭圆形Path2D路径的描边中。如果是，则椭圆的描边变为绿色，否则为红色。

HTML

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

JavaScript

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

// Create ellipse
const ellipse = new Path2D();
ellipse.ellipse(150, 75, 40, 60, Math.PI * 0.25, 0, 2 * Math.PI);
ctx.lineWidth = 25;
ctx.strokeStyle = "red";
ctx.fill(ellipse);
ctx.stroke(ellipse);

// Listen for mouse moves
canvas.addEventListener("mousemove", (event) => {
  // Check whether point is inside ellipse's stroke
  const isPointInStroke = ctx.isPointInStroke(
    ellipse,
    event.offsetX,
    event.offsetY,
  );
  ctx.strokeStyle = isPointInStroke ? "green" : "red";

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

结果

规范

规范
HTML 标准
# dom-context-2d-ispointinstroke-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅