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

javascriptKontext.rect(x, y, Breite, Höhe)

Beispiel

Zeichnen wir einen Umriss mit rect:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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:

html<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

Siehe auch