HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas rect() Methode

rect() ist Canvas 2Methode zur Erstellung von Rechteckpfaden mit D API, der Startpunkt des Rechtecks ist (x, y), die Größe ist width und height. Das Rechteck4Punkte durch Linien verbunden, der Unterpfad als Schließungssymbol, daher können Sie das Rechteck füllen oder umranden.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen 150*10Rechteck mit 0 Pixeln:

Beispiel

<!DOCTYPE　html>
<html>
<head>
<title>HTML canvas rect() Methode verwenden (Grundtutorials.net　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas Tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>　
</body>
</html>

Test it out ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome und Safari unterstützen rect() Methode.

Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Definition und Verwendung

Die Methode rect() erstellt ein Rechteck.

Hinweis:Verwenden Sie stroke() oderfill() Die Methode zeichnet tatsächlich ein Rechteck auf der Leinwand.

JavaScript Syntax:	context.rect(x,y,width,height);

Parameterwert

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 Pixel.
height	Höhe des Rechtecks in Pixel.

Online-Beispiel

Erstellen Sie drei Rechtecke mit der Methode rect():

Beispiel

<!DOCTYPE　html>
<html>
<head>
<title>HTML canvas rect() Methode verwenden (Grundtutorials.net　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas Tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//　Red Rectangle
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);　　
ctx.stroke();
//　Green Rectangle
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
//　Blue Rectangle
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();
</script>　
</body>
</html>

Test it out ‹/›

HTML canvas Reference Manual

HTML: <template> Tag