CanvasRenderingContext2D: setLineDash()-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 setLineDash()-Methode des CanvasRenderingContext2D-Interfaces der Canvas 2D API legt das Strichmuster fest, das beim Zeichnen von Linien verwendet wird. Sie verwendet ein Array von Werten, die abwechselnd die Längen von Linien und Lücken angeben, um das Muster zu beschreiben.

Hinweis: Um wieder ununterbrochene Linien zu verwenden, setzen Sie die Strichliste auf ein leeres Array.

Syntax

js
setLineDash(segments)

Parameter

segments

Ein Array von Zahlen, die die Abstände angeben, um abwechselnd eine Linie und eine Lücke zu zeichnen (in Koordinateneinheiten). Wenn die Anzahl der Elemente im Array ungerade ist, werden die Elemente des Arrays kopiert und angehängt. Zum Beispiel wird [5, 15, 25] zu [5, 15, 25, 5, 15, 25]. Wenn das Array leer ist, wird die Strichliste gelöscht und Linienstriche werden wieder ununterbrochen.

Rückgabewert

Keiner (undefined).

Beispiele

Einfaches Beispiel

Dieses Beispiel verwendet die setLineDash()-Methode, um eine gestrichelte Linie über einer ununterbrochenen Linie zu zeichnen.

HTML

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

JavaScript

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

// Dashed line
ctx.beginPath();
ctx.setLineDash([5, 15]);
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Solid line
ctx.beginPath();
ctx.setLineDash([]);
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();

Ergebnis

Einige häufige Muster

Dieses Beispiel veranschaulicht eine Vielzahl gängiger Strichmuster.

HTML

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

JavaScript

Die unten erstellte drawDashedLine()-Funktion vereinfacht das Zeichnen mehrerer gestrichelter Linien. Sie erhält ein Musterarray als einzigen Parameter.

js
function drawDashedLine(pattern) {
  ctx.beginPath();
  ctx.setLineDash(pattern);
  ctx.moveTo(0, y);
  ctx.lineTo(300, y);
  ctx.stroke();
  y += 20;
}

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

drawDashedLine([]);
drawDashedLine([1, 1]);
drawDashedLine([10, 10]);
drawDashedLine([20, 5]);
drawDashedLine([15, 3, 3, 3]);
drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3]);
drawDashedLine([12, 3, 3]); // Equals [12, 3, 3, 12, 3, 3]

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch