Methode rect
Die Methode rect zeichnet ein Rechteck an einem bestimmten Punkt.
Sichtbar wird dieses Rechteck nur, wenn die Methode stroke
oder fill angewendet wird.
Im ersten Fall entsteht ein Umriss, im zweiten
eine ausgefüllte Form.
Syntax
Kontext.rect(x, y, Breite, Höhe)
Beispiel
Zeichnen wir einen Umriss mit rect:
<canvas id="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();
:
Beispiel
Und jetzt zeichnen wir eine ausgefüllte Form:
<canvas id="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();
:
Siehe auch
-
Methode
fillRect,
die ein ausgefülltes Rechteck zeichnet -
Methode
strokeRect,
die den Umriss eines Rechtecks zeichnet
