CanvasRenderingContext2D: Methode clearRect()

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-Achsen-Koordinate des Startpunkts des Rechtecks.

y

Die y-Achsen-Koordinate des Startpunkts des Rechtecks.

width

Die Breite des Rechtecks. Positive Werte gehen nach rechts, und negative nach links.

height

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

Rückgabewert

Keiner (undefined).

Beispiele

Löschen des gesamten Canvas

Dieses Codebeispiel löscht das gesamte Canvas. Dies ist normalerweise zu Beginn jedes Frames in einer Animation erforderlich. Die Dimensionen des gelöschten Bereichs sind so eingestellt, dass sie den width- und height-Attributen des <canvas>-Elements entsprechen.

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 und hat seine obere linke 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

• Das Interface, das diese Methode definiert: CanvasRenderingContext2D
• CanvasRenderingContext2D.fillRect()
• CanvasRenderingContext2D.strokeRect()