HTML-Canvas rect()Methode
Beispiel
Zeichnen Sie ein Rechteck mit 150*100 Pixeln:
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
Selbst ausprobieren »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die rect()-Methode.
Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
Definition und Verwendung
Die rect()-Methode erstellt ein Rechteck.
Tipp:Bitte verwenden Sie diestroke()oderfill()-Methode, um das Rechteck tatsächlich auf das Canvas zu zeichnen.
| JavaScript-Syntax: | context.rect(x,y,width,height); |
|---|
Parameterwerte
| Parameter | Beschreibung |
|---|---|
| x | Die x-Koordinate der oberen linken Ecke des Rechtecks. |
| y | Die y-Koordinate der oberen linken Ecke des Rechtecks. |
| width | Die Breite des Rechtecks in Pixeln. |
| height | Die Höhe des Rechtecks in Pixeln. |
Weitere Beispiele
Beispiel
Erstellen Sie drei Rechtecke mit der rect()-Methode:
JavaScript：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Rotes Rechteck
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// Grünes Rechteck
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// Blaues Rechteck
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
var ctx=c.getContext("2d");
// Rotes Rechteck
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// Grünes Rechteck
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// Blaues Rechteck
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
Selbst ausprobieren »
HTML-Canvas-Referenzhandbuch Weitere Erweiterungen