CanvasRenderingContext2D: clearRect()-Methode

Syntax

clearRect(x, y, width, height)

Die Methode clearRect() setzt die Pixel in einem rechteckigen Bereich auf transparent. Die obere linke Ecke des Rechtecks befindet sich bei (x, y), und seine Größe wird durch width und height angegeben.

Parameter

x

Die x-Achsenkoordinate des Startpunkts des Rechtecks.

y

Die y-Achsenkoordinate des Startpunkts des Rechtecks.

width

Die Breite des Rechtecks. Positive Werte liegen rechts, negative links.

height

Die Höhe des Rechtecks. Positive Werte gehen nach unten, negative nach oben.

Rückgabewert

Keiner (undefined).

Beispiele

Löschen des gesamten Canvas

Dieses Codebeispiel löscht das gesamte Canvas. Dies ist normalerweise am Anfang jedes Frames in einer Animation erforderlich. Die Dimensionen des gelöschten Bereichs werden gleich den width und height-Attributen des <canvas>-Elements gesetzt.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

Löschen eines Teils eines Canvas

Dieses Beispiel zeichnet ein blaues Dreieck auf einen gelblichen Hintergrund. Die Methode clearRect() löscht dann einen Teil des Canvas.

HTML

<canvas id="canvas"></canvas>

JavaScript

Der gelöschte Bereich ist rechteckig mit seiner oberen linken Ecke bei (10, 10). Der gelöschte Bereich hat eine Breite von 120 und eine Höhe von 100.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Draw yellow background
ctx.beginPath();
ctx.fillStyle = "#ffff66";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw blue triangle
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();

// Clear part of the canvas
ctx.clearRect(10, 10, 120, 100);

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle, die diese Methode definiert: CanvasRenderingContext2D
• CanvasRenderingContext2D.fillRect()
• CanvasRenderingContext2D.strokeRect()