CanvasRenderingContext2D: lineWidth-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.
Die CanvasRenderingContext2D.lineWidth-Eigenschaft der Canvas 2D API legt die Dicke von Linien fest.
Hinweis:
Linien können mit den
stroke(),
strokeRect(),
und strokeText() Methoden gezeichnet werden.
Wert
Eine Zahl, die die Linienstärke in Koordinatenraumeinheiten angibt. Werte wie Null, negativ, Infinity, und NaN werden ignoriert. Der Standardwert ist 1.0.
Beispiele
Änderung der Linienstärke
In diesem Beispiel wird eine Linie und ein Rechteck gezeichnet, wobei eine Linienstärke von 15 Einheiten verwendet wird.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.lineWidth = 15;
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(130, 130);
ctx.rect(40, 40, 70, 70);
ctx.stroke();
Ergebnis
Weitere Beispiele
Weitere Beispiele und Erklärungen zu dieser Eigenschaft finden Sie unter Anwenden von Stilen und Farben im Canvas-Tutorial.
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-context-2d-linewidth-dev |
Browser-Kompatibilität
Siehe auch
- Das Interface, das diese Eigenschaft definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.lineCapCanvasRenderingContext2D.lineJoin- Anwenden von Stilen und Farben