Pregunta Cómo borrar el lienzo para volver a dibujar


Después de experimentar con operaciones compuestas y dibujar imágenes en el lienzo, ahora estoy tratando de eliminar imágenes y composición. ¿Cómo hago esto?

Necesito borrar el lienzo para volver a dibujar otras imágenes; esto puede continuar por un tiempo, así que no creo que dibujar un nuevo rectángulo cada vez sea la opción más eficiente.


787
2018-01-26 20:50


origen


Respuestas:


const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

971
2018-01-26 20:52



Utilizar: context.clearRect(0, 0, canvas.width, canvas.height);

Esta es la forma más rápida y más descriptiva de borrar todo el lienzo.

No utilice: canvas.width = canvas.width;

Restablecer canvas.width restablece todo el estado del lienzo (por ejemplo, transformaciones, lineWidth, strokeStyle, etc.), es muy lento (en comparación con clearRect), no funciona en todos los navegadores y no describe lo que realmente está intentando hacer.

Tratar con coordenadas transformadas

Si ha modificado la matriz de transformación (por ejemplo, utilizando scale, rotate, o translate) entonces context.clearRect(0,0,canvas.width,canvas.height) es probable que no borre toda la porción visible del lienzo.

¿La solución? Restablezca la matriz de transformación antes de borrar el lienzo:

// Store the current transformation matrix
context.save();

// Use the identity matrix while clearing the canvas
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);

// Restore the transform
context.restore();

Editar: Acabo de hacer algunos perfiles y (en Chrome) es aproximadamente un 10% más rápido borrar un lienzo de 300x150 (tamaño predeterminado) sin restablecer la transformación. A medida que aumenta el tamaño de su lienzo, esta diferencia disminuye.

Eso ya es relativamente insignificante, pero en la mayoría de los casos sacará mucho más de lo que está limpiando y creo que esta diferencia de rendimiento será irrelevante.

100000 iterations averaged 10 times:
1885ms to clear
2112ms to reset and clear

661
2017-07-17 05:06



Si dibuja líneas, asegúrese de no olvidar:

context.beginPath();

De lo contrario, las líneas no se borrarán.


189
2018-01-13 07:12



Otros ya han hecho un excelente trabajo respondiendo la pregunta, pero si un simple clear() método en el objeto de contexto sería útil para usted (fue para mí), esta es la implementación que uso en base a las respuestas aquí:

CanvasRenderingContext2D.prototype.clear = 
  CanvasRenderingContext2D.prototype.clear || function (preserveTransform) {
    if (preserveTransform) {
      this.save();
      this.setTransform(1, 0, 0, 1, 0, 0);
    }

    this.clearRect(0, 0, this.canvas.width, this.canvas.height);

    if (preserveTransform) {
      this.restore();
    }           
};

Uso:

window.onload = function () {
  var canvas = document.getElementById('canvasId');
  var context = canvas.getContext('2d');

  // do some drawing
  context.clear();

  // do some more drawing
  context.setTransform(-1, 0, 0, 1, 200, 200);
  // do some drawing with the new transform
  context.clear(true);
  // draw more, still using the preserved transform
};

107
2018-03-15 15:05



  • Chrome responde bien a: context.clearRect ( x , y , w , h ); como lo sugiere @ Pentium10 pero IE9 parece ignorar por completo esta instrucción.
  • IE9 parece responder a: canvas.width = canvas.width; pero no borra líneas, solo formas, imágenes y otros objetos a menos que también uses la solución de @John Allsopp de cambiar primero el ancho.

Entonces, si tiene un lienzo y un contexto creado así:

var canvas = document.getElementById('my-canvas');
var context = canvas.getContext('2d');

Puedes usar un método como este:

function clearCanvas(context, canvas) {
  context.clearRect(0, 0, canvas.width, canvas.height);
  var w = canvas.width;
  canvas.width = 1;
  canvas.width = w;
}

33
2017-11-03 09:48



Utilice el método clearRect pasando las coordenadas x, y y el alto y ancho del lienzo. ClearRect borrará todo el lienzo como:

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

18
2017-11-13 06:08



hay un montón de buenas respuestas aquí. Una nota más es que a veces es divertido borrar solo parcialmente el lienzo. es decir, "atenuar" la imagen anterior en lugar de borrarla por completo. esto puede dar buenos efectos senderos.

es fácil. suponiendo que el color de fondo es blanco:

// assuming background color = white and "eraseAlpha" is a value from 0 to 1.
myContext.fillStyle = "rgba(255, 255, 255, " + eraseAlpha + ")";
myContext.fillRect(0, 0, w, h);

13
2018-05-04 04:36



en webkit necesita establecer el ancho a un valor diferente, luego puede volver a establecer el valor inicial


4
2017-08-02 04:50