¿Hay una manera de ampliar de forma dinámica el canvas de HTML5 sin borrar lo que está dibujado en él?

StackOverflow https://stackoverflow.com/questions/2405772

  •  18-09-2019
  •  | 
  •  

Pregunta

este

cuando la salida alcanza la parte inferior de la página, me gustaría el lienzo para extender automáticamente para que pueda seguir adelante. He intentado establecer la propiedad canvas.height, pero borra la ventana. ¿Hay alguna manera de hacer esto?

¿Fue útil?

Solución

Lo que hago:
crear lienzo maniquí con mismo tamaño que el lienzo. 

dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);

No es muy bonito, sobre todo en su situación en la que se requeriría que recrear el lienzo más de 50 veces por segundo ... interesado en ver otras respuestas ... Funciona para mí porque acabo de cambiar el tamaño del lienzo cuando el clientWidth / clientHeight cambios [window.onresize]

Otros consejos

Sé que esto es una especie de edad ahora, sin embargo:

No es necesario volver a crear el lienzo como explaines ItzWarty. Usted puede hacer esto: 

<html>...
  <canvas id="canvas"></canvas>
  <canvas id="buffer" style="display:none;"></canvas>
  ...
</html>

A continuación, este sería su javascript: 

var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
window.onresize = function(event) {
    var w = $(window).width(); //Using jQuery for easy multi browser support.
    var h = $(window).height();
    buffer.width = w;
    buffer.height = h;
    buffer.getContext('2d').drawImage(canvas, 0, 0);
    canvas.width = w;
    canvas.height = h;
    canvas.getContext('2d').drawImage(buffer, 0, 0);
}

Aquí sólo se cambia el tamaño de los lienzos, y se copia sobre la imagen. No estoy seguro, pero creo que el rendimiento es un poco mejor, y es en mi opinión, más simple y más fácil de entender.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top