HTML-Canvas-Linien

实例

// Erstelle das Canvas:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Definiere einen neuen Pfad:
ctx.beginPath();
// Definiere den Startpunkt:
ctx.moveTo(0, 0);
// Definiere den Endpunkt:
ctx.lineTo(200, 100);
// Zeichne:
ctx.stroke();

Versuchen Sie es selbst

Canvas-Linienzeichnung

Die Linienzeichnung verwendet den Pfad im Canvas:

Methode

Die methodName-Methode beginnt eine neue Strecke. Sie zeichnet nichts, sie definiert nur eine neue Strecke.

Die moveTo()-Methode definiert den Startpunkt der Linie. Sie zeichnet nichts, sie setzt nur einen Startpunkt.

Die lineTo()-Methode definiert den Endpunkt der Linie. Sie zeichnet nichts, sie setzt nur einen Endpunkt.

Die stroke()-Methode zeichnet tatsächlich die Linie. Standardmäßig ist die Strichfarbe schwarz.

lineWidth-Eigenschaft

Die lineWidth-Eigenschaft definiert die Linienbreite, die beim Zeichnen auf dem Canvas verwendet wird.

Es muss vor dem Aufruf der Methode stroke() eingerichtet werden.

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

Versuchen Sie es selbst

strokeStyle-Eigenschaft

Die strokeStyle-Eigenschaft definiert den Stil, der beim Zeichnen auf dem Canvas verwendet wird.

Es muss vor dem Aufruf der Methode stroke() eingerichtet werden.

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

Versuchen Sie es selbst

lineCap-Eigenschaft

Die lineCap-Eigenschaft definiert den Stileffekt der Linienenden (butt, round oder square).

Standardmäßig ist es square (quadratisch).

Es muss vor dem Aufruf der Methode stroke() eingerichtet werden.

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

Versuchen Sie es selbst

Weitere Informationen:

Vollständiges Canvas-Referenzhandbuch von CodeW3C.com