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 Juli 2015.
Die
CanvasRenderingContext2D.lineDashOffset
Eigenschaft der Canvas 2D API setzt den Linienstrich-Versatz oder die "Phase".
Hinweis:
Linien werden gezeichnet, indem die
stroke() Methode aufgerufen wird.
Wert
Ein Float, der die Höhe des Versatzes des Linie-Strichs angibt. Der Standardwert ist 0.0.
Beispiele
Versatz eines Linie-Strichs
Dieses Beispiel zeichnet zwei gestrichelte Linien. Die erste hat keinen Linienversatz. Die zweite hat einen Linienversatz von 4.
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 Linienversatz wird in Rot gezeichnet.
Marching Ants
Der Marching Ants-Effekt ist eine Animationstechnik, die oft in Auswahlwerkzeugen von Computer-Grafikprogrammen zu finden ist. Er hilft dem Benutzer, die Auswahlgrenze vom Hintergrundbild zu unterscheiden, indem die Grenze animiert wird.
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 # dom-context-2d-linedashoffset-dev |
Browser-Kompatibilität
Loading…
Siehe auch
- Das Interface, das diese Eigenschaft definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.getLineDash()CanvasRenderingContext2D.setLineDash()- Anwenden von Stilen und Farbe