HTML-Canvas-Rechteck
- Vorherige Seite Canvas-Formen
- Nächste Seite Canvas-Kreis
Beispiel
Zeichnen Sie ein 150*100 Pixel großes Rechteck:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
rect() Methode
Die Methode rect() fügt einem Pfad einen Rechteck hinzu.
Syntax:
context.rect(x, y, width, height)
| Parameter | Beschreibung |
|---|---|
| x | x-Koordinate des linken oberen Ecks des Rechtecks. |
| y | y-Koordinate des linken oberen Ecks des Rechtecks. |
| width | Breite des Rechtecks in Pixeln. |
| height | Höhe des Rechtecks in Pixeln. |
Mehr Beispiele
Beispiel
Verwenden Sie die Methode rect() zur Erstellung von drei Rechtecken:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Rotes Rechteck
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// Grünem Rechteck
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// Blauer Rechteck
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();
Weitere Informationen:
- Vorherige Seite Canvas-Formen
- Nächste Seite Canvas-Kreis
