Linien zeichnen mit Canvas in JavaScript
Beginnen wir mit etwas Einfachem - dem Zeichnen von Linien. Um zu verstehen, wie das funktioniert, stellen Sie sich vor, dass Sie ein Blatt Papier und einen Bleistift haben. Sie können auf diesem Blatt zeichnen, oder Sie können den Bleistift ohne zu zeichnen einfach an die gewünschte Stelle bewegen.
Genauso funktioniert JavaScript: Es hat einen
Bleistift (oder einen Zeichenstift), an die gewünschte
Stelle können Sie ihn mit der Methode
moveTo bewegen,
und zeichnen - mit der Methode
lineTo.
Beide Methoden nehmen als Parameter den Punkt, an
den die Stiftspitze bewegt werden soll - der erste Parameter
ist die Koordinate horizontal, der zweite - vertikal.
Der Koordinatenursprung - Punkt 0,
0 - ist die obere linke Ecke des Elements.
Wenn der Stift an die gewünschte Stelle bewegt wird -
bewegt die Methode moveTo ihn nur, während
lineTo während der Bewegung eine
Linie von der aktuellen Stiftposition bis zum Punkt zeichnet,
an den er bewegt wird.
Wenn Sie jedoch den obigen Code ausführen,
passiert nichts: Zwei weitere Befehle müssen geschrieben werden:
Der erste Befehl beginPath
muss vor dem Zeichnen der Linie angegeben werden,
und der zweite Befehl stroke muss
nach allen Kombinationen von moveTo
und lineTo aufgerufen werden, damit die Linie gezeichnet wird.
Lassen Sie uns also einen funktionierenden Code zum Zeichnen einer Linie schreiben:
Zeichnen wir eine Linie
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Zeichnen wir ein Vögelchen
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Zeichnen wir ein Dreieck
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Zeichnen wir ein Quadrat
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Schließen von Formen
Um eine geschlossene Form zu zeichnen, muss man nicht
alle Linien selbst zeichnen - die letzte Linie kann
automatisch gezeichnet werden und die Form schließen.
Dazu sollte vor der Methode stroke die
Methode closePath aufgerufen werden.
Diese Methode versucht, die Form zu schließen, indem sie eine gerade Linie vom Endpunkt zum Startpunkt zeichnet. Wenn die Form bereits geschlossen war oder nur ein einfacher Punkt ist, tut die Methode nichts.
Lassen Sie uns ein Dreieck zeichnen und dabei closePath verwenden:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - diesen Schritt lassen wir aus
ctx.closePath();
ctx.stroke();
:
Füllen von Formen
Anstelle der Methode stroke kann die
Methode fill verwendet werden - dabei muss die Form
nicht unbedingt vollständig geschlossen sein - sie wird trotzdem gefüllt:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - diesen Schritt lassen wir aus
//ctx.closePath(); - und diesen auch
ctx.fill();
:
