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 ⁨Januar 2020⁩.

Die CanvasRenderingContext2D.isPointInStroke()-Methode der Canvas 2D API gibt an, ob der angegebene Punkt sich innerhalb des durch das Umranden eines Pfades gebildeten Bereichs befindet.

Syntax

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

Parameter

x: Die x-Koordinate des zu überprüfenden Punktes.
y: Die y-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 sich der Punkt innerhalb des durch das Umranden eines Pfades gebildeten Bereichs befindet, ansonsten false.

Beispiele

Überprüfung eines Punktes im aktuellen Pfad

Dieses Beispiel verwendet die isPointInStroke()-Methode, um zu überprüfen, ob sich ein Punkt innerhalb des Bereichs des Umrisses des aktuellen Pfades befindet.

HTML

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

Ergebnis

Überprüfung eines Punktes im angegebenen Pfad

Immer wenn Sie die Maus bewegen, prüft dieses Beispiel, ob sich der Cursor innerhalb des Umrisses eines elliptischen Path2D-Pfades befindet. Wenn ja, wird der Umriss der Ellipse grün, andernfalls rot.

HTML

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

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Das Interface, das diese Methode definiert: CanvasRenderingContext2D

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden