CanvasRenderingContext2D: lineDashOffset-Eigenschaft

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 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 Float, der die Höhe des Linienstrichversatzes angibt. Der Standardwert ist 0.0.

Beispiele

Linienstrich versetzen

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

js
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 Strichversatz wird in Rot gezeichnet.

Marching Ants

Der Marching Ants-Effekt ist eine Animationstechnik, die häufig in Auswahlwerkzeugen von Bildbearbeitungsprogrammen zu finden ist. Sie hilft dem Benutzer, den Auswahlrahmen vom Bildhintergrund zu unterscheiden, indem der Rahmen animiert wird.

js
const canvas = document.getElementById("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();

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch