html5-canvas
Borrar la pantalla

Sintaxis

• void clearRect (x, y, ancho, alto)
• ImageData createImageData (ancho, alto)

Observaciones

Rectángulos

Puede utilizar el método clearRect para borrar cualquier sección rectangular del lienzo.

// Clear the entire canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

Nota: clearRect depende de la matriz de transformación.

Para solucionar esto, es posible restablecer la matriz de transformación antes de borrar el lienzo.

ctx.save();                                       // Save the current context state
ctx.setTransform(1, 0, 0, 1, 0, 0);               // Reset the transformation matrix
ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
ctx.restore();                                    // Revert context state including 
                                                  // transformation matrix

Nota: ctx.save y ctx.restore solo se requieren si desea mantener el estado de contexto 2D del lienzo. En algunas situaciones, guardar y restaurar puede ser lento y, por lo general, debe evitarse si no es necesario.

Datos de imagen en bruto

Es posible escribir directamente en los datos de la imagen renderizada usando putImageData . Al crear nuevos datos de imagen y luego asignarlos al lienzo, se borrará toda la pantalla.

var imageData = ctx.createImageData(canvas.width, canvas.height);
ctx.putImageData(imageData, 0, 0);

Nota: putImageData no se ve afectado por ninguna transformación aplicada al contexto. Escribirá los datos directamente en la región de píxeles representados.

Formas complejas

Es posible borrar regiones con formas complejas cambiando la propiedad globalCompositeOperation .

// All pixels being drawn will be transparent
ctx.globalCompositeOperation = 'destination-out';

// Clear a triangular section
ctx.globalAlpha = 1;    // ensure alpha is 1
ctx.fillStyle = '#000'; // ensure the current fillStyle does not have any transparency
ctx.beginPath();
ctx.moveTo(10, 0);
ctx.lineTo(0, 10);
ctx.lineTo(20, 10);
ctx.fill();

// Begin drawing normally again
ctx.globalCompositeOperation = 'source-over';

Lienzo claro con degradado.

En lugar de utilizar clearRect que hace que todos los píxeles sean transparentes, es posible que desee un fondo.

Para borrar con un gradiente

// create the background gradient once
var bgGrad = ctx.createLinearGradient(0,0,0,canvas.height);
bgGrad.addColorStop(0,"#0FF");
bgGrad.addColorStop(1,"#08F");

// Every time you need to clear the canvas
ctx.fillStyle = bgGrad;
ctx.fillRect(0,0,canvas.width,canvas.height);

Esto es aproximadamente la mitad de 0.008ms rápidos que los 0.008ms ms 0.004ms pero los 4 millones de segundos no deberían afectar negativamente a ninguna animación en tiempo real. (Los tiempos variarán considerablemente según el dispositivo, la resolución, el navegador y la configuración del navegador. Los tiempos son solo para comparación)

Lienzo transparente utilizando operación compuesta

Borrar el lienzo utilizando la operación de composición. Esto borrará el lienzo independientemente de las transformaciones, pero no es tan rápido como clearRect() .

ctx.globalCompositeOperation = 'copy';

Todo lo que se dibuje a continuación borrará el contenido anterior.