CanvasRenderingContext2D: isPointInStroke()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.isPointInStroke() Methode der Canvas 2D API gibt an, ob der angegebene Punkt innerhalb des Bereichs liegt, der durch die Umrandung eines Pfads eingeschlossen ist.

Syntax

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

Parameter

x

Die x-Achsen-Koordinate des zu überprüfenden Punktes.

y

Die y-Achsen-Koordinate des zu überprüfenden Punktes.

path

Ein Path2D-Pfad, der überprüft werden soll. Wenn nicht angegeben, wird der aktuelle Pfad verwendet.

Rückgabewert

Ein boolescher Wert

Ein Boolean, der true ist, wenn der Punkt innerhalb des von der Pfadumrandung eingeschlossenen Bereichs liegt, ansonsten false.

Beispiele

Überprüfung eines Punkts im aktuellen Pfad

Dieses Beispiel verwendet die isPointInStroke()-Methode, um zu überprüfen, ob ein Punkt innerhalb des Bereichs der Umrandung des aktuellen Pfads liegt.

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

Ergebnis

Überprüfung eines Punkts im angegebenen Pfad

Immer wenn Sie die Maus bewegen, überprüft dieses Beispiel, ob sich der Cursor im Strich eines elliptischen Path2D-Pfads befindet. Wenn ja, wird der Strich der Ellipse grün, andernfalls rot.

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

Ergebnis

Spezifikationen

Specification
HTML Standard
# dom-context-2d-ispointinstroke-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch