CanvasRenderingContext2D.fillRect()
Die Methode CanvasRenderingContext2D
.fillRect()
der Canvas 2D API zeichnet ein ausgefülltes Rechteck an der Position (x
, y
). Die Größe wird über die Parameter width
und height
bestimmt. Die Füllfarbe wird über das Attribut fillStyle
des Context-Objekts festgelegt.
Syntax
void ctx.fillRect(x, y, width, height);
Parameter
x
- Die Koordinate auf der x-Achse als horizontaler Startpunkt des Rechtecks.
y
- Die Koordinate auf der y-Achse als vertikaler Startpunkt des Rechtecks.
width
- Die Breite des Rechtecks.
height
- Die Höhe des Rechtecks.
Beispiele
Benutzung der Methode fillRect
Dies ist ein einfaches Code-Beispiel, welches die fillRect
Methode nutzt.
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
// fill the whole canvas
// ctx.fillRect(0, 0, canvas.width, canvas.height);
Ändern Sie den unten gezeigten Code und sehen Sie Ihre Änderungen live im Canvas-Element:
Spezifikationen
Spezifikation | Status | Kommentar |
---|---|---|
HTML Living Standard Die Definition von 'CanvasRenderingContext2D.fillRect' in dieser Spezifikation. |
Lebender Standard |
Browserkompatibilität
BCD tables only load in the browser