Rechtecke zeichnen mit Canvas in JavaScript
Quadraten und Rechtecke muss man nicht unbedingt
mit Kombinationen von moveTo und
lineTo zeichnen - dafür gibt es einfachere Methoden.
Lassen Sie uns diese durchgehen.
Methode strokeRect
Die Methode strokeRect(x, y, Breite,
Höhe) zeichnet den Umriss eines Rechtecks
an einem bestimmten Punkt. Die ersten beiden Parameter legen
die Koordinaten des Punktes fest, an dem sich die obere
linke Ecke des gezeichneten Rechtecks befinden wird.
Lassen Sie uns ein Rechteck mit
strokeRect zeichnen (wir gehen davon aus, dass ctx
bereits existiert):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Methode fillRect
Die Methode fillRect(x, y, Breite, Höhe)
funktioniert genauso wie strokeRect,
zeichnet jedoch ein gefülltes Rechteck.
Sehen wir uns ein Beispiel an:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Methode rect
Die nächste Methode rect(x, y, Breite,
Höhe) zeichnet ebenfalls ein Rechteck. Aber
sichtbar wird dieses Rechteck erst,
wenn die Methode stroke oder fill angewendet wird.
Im ersten Fall entsteht ein Umriss, im zweiten
- eine gefüllte Form.
Lassen Sie uns einen Umriss mit rect zeichnen:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
Und jetzt zeichnen wir eine gefüllte Form:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Methode clearRect
Die nächste Methode clearRect(x, y,
Breite, Höhe) funktioniert wie ein Radiergummi,
löscht einen rechteckigen Bereich und macht
den Inhalt vollständig transparent.
Lassen Sie uns ein Quadrat mit fillRect zeichnen
und einen Teil davon mit clearRect löschen:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
