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
Rückgabewert
- Ein boolescher Wert
-
Ein Boolean, der
true
ist, wenn sich der Punkt innerhalb des durch das Umranden eines Pfades gebildeten Bereichs befindet, ansonstenfalse
.
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
<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
<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
Loading…
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D