Lienzo HTML - el dibujo desaparece al cambiar el tamaño

Question

He creado una forma básica en el elemento canvas de HTML que funciona bien.

El problema se produce cuando redimensionar el lienzo, todo el dibujo en el lienzo desaparece. ¿Es este el comportamiento normal? o hay una función que se puede utilizar para detener esto?

Una forma de solucionar esto podría ser llamar de nuevo a la función de dibujo en el cambio de tamaño del lienzo, aunque esto puede no ser muy eficiente si hay un gran contenido para dibujar.

¿Cuál es la mejor manera?

Aquí está el enlace a la muestra de código https://gist.github.com/2983915

Answer 1

Es necesario volver a dibujar la escena cuando cambia el tamaño.

configurando el ancho o la altura de un lienzo, aunque lo establezca con el mismo valor que antes, no solo borra el lienzo sino que restablece todo el contexto del lienzo. Cualquier propiedad establecida (fillStyle, lineWidth, la región de recorte, etc.) también se restablecerá.

Si no tiene la capacidad de volver a dibujar la escena desde cualquier estructura de datos que pueda tener representando el lienzo, siempre puede guardar todo el lienzo dibujándolo en un lienzo en memoria, estableciendo el ancho original, y dibujando el lienzo en memoria de vuelta al lienzo original.

Aquí hay un ejemplo muy rápido de guardar el mapa de bits de la lona y ponerlo de nuevo después de un cambio de tamaño:

http://jsfiddle.net/simonsarris/weMbr/

Answer 2

Cada vez que se cambia el tamaño del lienzo que se restablecerá a transparente negro, as defined in the spec.

que o bien tienen que:

• redibujar al cambiar el tamaño del lienzo, o,
• no cambian de tamaño del lienzo

Answer 3

También me encontré con este problem.but después de un experimento, me encontré con que el elemento Cambiar el tamaño de lienzo borra automáticamente todos los dibujos del lienzo! simplemente intente con el siguiente código

<canvas id = 'canvas'></canvas> 
<script> 
    var canvas1 = document.getElementById('canvas') 
    console.log('canvas size',canvas1.width, canvas1.height) 
    var ctx = canvas1.getContext('2d') 
    ctx.font = 'Bold 48px Arial' 
    var f = ctx.font 
    canvas1.width = 480 
    var f1 = ctx.font 
    alert(f === f1) //false 
</script>