CanvasRenderingContext2D: lineDashOffset-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die CanvasRenderingContext2D.lineDashOffset-Eigenschaft der Canvas 2D API legt den Linienstrichversatz oder die "Phase" fest.

Hinweis: Linien werden durch Aufrufen der stroke()-Methode gezeichnet.

Wert

Ein Gleitkommawert, der den Versatz der gestrichelten Linie angibt. Der Standardwert ist 0.0.

Beispiele

Versatz eines gestrichelten Linies

Dieses Beispiel zeichnet zwei gestrichelte Linien. Die erste hat keinen Strichversatz. Die zweite hat einen Strichversatz von 4.

HTML

html

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

JavaScript

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

ctx.setLineDash([4, 16]);

// Dashed line with no offset
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();

// Dashed line with offset of 4
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineDashOffset = 4;
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();

Ergebnis

Die Linie mit einem Strichversatz wird in Rot gezeichnet.

Der Effekt der laufenden Ameisen ist eine Animationstechnik, die häufig in Auswahlwerkzeugen von Grafikprogrammen verwendet wird. Sie hilft dem Benutzer, den Auswahlrand von dem Bildhintergrund zu unterscheiden, indem der Rand animiert wird.

<canvas id="my-canvas"></canvas>

const canvas = document.getElementById("my-canvas");
const ctx = canvas.getContext("2d");
let offset = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = offset;
  ctx.strokeRect(10, 10, 100, 100);
}

function march() {
  offset++;
  if (offset > 5) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();