HTML5 Borrar lienzo en Canvas

HTML5 Uso de clearRect() en Canvas2La función clearRect() del contexto D se utiliza para borrar el rectángulo del lienzo. El rectángulo borrado se vuelve transparente.

Ejemplo en línea

2La función clearRect() del contexto D se utiliza para borrar el rectángulo del lienzo. El rectángulo borrado se vuelve transparente. Este es un ejemplo de código:

<canvas id="ex1" width="500" height="150" style="border:　1px sólido #cccccc;">　　　　
HTML5　Canvas no soportado　　　　
</canvas>　　　　
<script>　　　　
var canvas = document.getElementById("ex1");　　　　
var context = canvas.getContext("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>

Tenga en cuenta cómo se borran los rectángulos rojos y azules dentro de los rectángulos.
Como se mencionó anteriormente, el área borrada se vuelve transparente al usar clearRect(). Si el elemento canvas se ha colocado en la parte superior de otro elemento, el contenido de ese elemento se volverá visible a través del área borrada.

clearRect(x, y, width, height)

Al igual que al dibujar un rectángulo, se pasan a4Los parámetros de clearRect() representan la esquina superior izquierda del rectángulo que se va a borrar, así como el ancho y la altura del rectángulo que se va a borrar.
Este es un ejemplo más claro:

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