CanvasRenderingContext2D: getLineDash()-Methode

Baseline Widely available

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

Die getLineDash()-Methode des CanvasRenderingContext2D-Interfaces der Canvas 2D API gibt das aktuelle Strichelmuster zurück.

Ein Array von Zahlen, die Abstände angeben, um abwechselnd eine Linie und eine Lücke zu zeichnen (in Koordinateneinheiten). Wenn die Zahl beim Festlegen der Elemente ungerade ist, werden die Elemente des Arrays kopiert und angefügt. Zum Beispiel wird durch Festlegen des Linienstrichs auf [5, 15, 25] letztlich [5, 15, 25, 5, 15, 25] zurückgegeben.

Beispiele

Abrufen der aktuellen Line-Dash-Einstellung

Dieses Beispiel zeigt die Verwendung der getLineDash()-Methode.

HTML

html

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

JavaScript

Wie durch setLineDash() festgelegt, bestehen Striche aus Linien, die 10 Einheiten breit sind, mit Abständen von 20 Einheiten zwischen jeder Linie.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.setLineDash([10, 20]);
console.log(ctx.getLineDash()); // [10, 20]

// Draw a dashed line
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();