CanvasRenderingContext2D: метод isPointInStroke()

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Метод CanvasRenderingContext2D.isPointInStroke() API Canvas 2D сообщает, находится ли указанная точка внутри области, образованной обводкой пути.

Синтаксис

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

Параметры

x: Координата точки по оси X.
y: Координата точки по оси Y.
path: Путь Path2D для проверки. Если не указан, используется текущий путь.

Возвращаемое значение

Булево значение: Логическое значение, равное true если точка находится внутри области, образованной обводкой пути, иначе false.

Примеры

Проверка точки в текущем пути

В этом примере используется метод isPointInStroke() для проверки, находится ли точка внутри области обводки текущего пути.

HTML

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

JavaScript

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

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

JavaScript

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

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`isPointInStroke`	26	79	19	15	7	26	19	14	7	1.5	4.4
`path_parameter`	36	79	31	23	7	36	31	24	7	3.0	37

См. также

Интерфейс, определяющий этот метод: CanvasRenderingContext2D

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/isPointInStroke