CanvasRenderingContext2D: метод isPointInPath()

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

x

Координата x точки для проверки, не подверженная текущему преобразованию контекста.

y

Координата y точки для проверки, не подверженная текущему преобразованию контекста.

fillRule

Алгоритм определения, находится ли точка внутри или вне траектории. Возможные значения:

nonzero

Правило о нечётном количестве пересечений. Правило по умолчанию.

evenodd

Правило чётности.

path

Траектория Path2D для проверки. Если не указано, используется текущая траектория.

Булево значение

Булево значение, равное true , если указанная точка содержится в текущей или указанной траектории, в противном случае false.

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

HTML

<canvas id="canvas"></canvas>
<p>In path: <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.fill();
result.innerText = ctx.isPointInPath(30, 70);

Результат

В этом примере при перемещении мыши проверяется, находится ли курсор внутри круговой Path2D траектории. Если да, круг становится зелёным, иначе — красным.

HTML

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

JavaScript

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);
});

Результат

• До Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4) этот метод неправильно не умножал координаты заданной точки на текущую матрицу преобразования перед сравнением с траекторией. Сейчас метод работает правильно, даже если контекст повернут, масштабирован или преобразован другим способом.

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