CanvasRenderingContext2D: Eigenschaft lineWidth
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.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
Beispiele
Ändern der Linienbreite
In diesem Beispiel werden eine Linie und ein Rechteck mit einer Linienbreite von 15 Einheiten gezeichnet.
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
Für weitere Beispiele und Erklärungen zu dieser Eigenschaft siehe Anwenden von Stilen und Farbe im Canvas-Leitfaden.
Spezifikationen
Specification |
---|
HTML # dom-context-2d-linewidth-dev |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
lineWidth |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Das Interface, das diese Eigenschaft definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.lineCap
CanvasRenderingContext2D.lineJoin
- Anwenden von Stilen und Farbe