HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas fillRect() Methode

fillRect() ist Canvas 2D API Zeichnen gefüllter Rechteck Methode. Der Startpunkt des Rechtecks ist an der Position (x, y), die Größe des Rechtecks ist width und height, die fillStyle-Eigenschaft bestimmt den Stil des Rechtecks.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen 100*100 Pixel großer gefüllter Quadrat:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der HTML canvas fillRect() Methode (Grundlagen-Tutorial von oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="200" Höhe="150" style="Rahmen:1px fest gestrichen #d3d3d3>
Ihr Browser unterstützt keine HTML5　canvas-Tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>
</body>
</html>

Test it out ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9,Firefox, Opera, Chrome and Safari support the fillRect() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Definition and Usage

The fillRect() method draws a 'filled' rectangle. The default fill color is black.

Tip:Please use fillStyle Use the property to set the color, gradient, or pattern used for filling the drawing.

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

Parameter Value

Parameter	Description
x	The x coordinate of the top-left corner of the rectangle.
y	The y coordinate of the top-left corner of the rectangle.
width	The width of the rectangle, in pixels.
height	The height of the rectangle, in pixels.

HTML canvas Reference Manual

HTML: <template> Tag