HTML5 Canvas das Bildschirm löschen

HTML5 Verwendung von clearRect() in Canvas2Die Funktion clearRect() des Kontexts D wird verwendet, um den Rechteckbereich des Bildschirms zu löschen. Der gelöschte Rechteckbereich wird transparent.

Online-Beispiel

2Die Funktion clearRect() des Kontexts D wird verwendet, um den Rechteckbereich des Bildschirms zu löschen. Der gelöschte Rechteckbereich wird transparent. Dies ist ein Beispielcode:

<canvas id="ex1" width="500" height="150" style="border:　1px fest #cccccc;">　　　　
HTML5　Canvas nicht unterstützt　　　　
</canvas>　　　　
<script>　　　　
var canvas = document.getElementById("ex1");　　　　
2d');　　　　
context.fillStyle = "#ff0000";　　　　
context.fillRect(10,10,　100,100);　　　　
context.strokeStyle = "#0000ff";　　　　
context.strokeRect(30,20,　120,　110);　　　　
context.clearRect(50,　30,　110,　35);　　　　　　　　　
</script>

Beachten Sie, wie die Rechtecke in den roten und blauen Rechtecken gelöscht werden.
Wie erwähnt, wird die durch clearRect() gelöschte Fläche transparent. Wenn das canvas-Element über einem anderen Element positioniert ist, wird der Inhalt dieses Elements durch die gelöschte Fläche sichtbar.

clearRect(x, y, width, height)

Wie beim Zeichnen eines Rechtecks, wird an clearRect(x, y, width, height) übergeben4Der Parameter clearRect() gibt die Ecke links oben des zu löschenden Rechtecks sowie die Breite und Höhe des zu löschenden Rechtecks an.
Dies ist ein klarerer Beispiel:

var x =　50;
var y =　30;
var width =　110;
var height =　25;
context.clearRect(x, y, width, height);