cambiar - html5 tags

Parpadeo durante el cambio de tamaño del lienzo de HTML5

Question

Estoy observando algunos parpadeos durante el cambio de tamaño de un control de lienzo animado.

Puedes verlo en acción en esta página . Arrastre el control deslizante ''ancho'' hacia la izquierda y hacia la derecha para probarlo usted mismo. Veo este parpadeo en Chrome 26.0.1410.43 ejecutándose en Linux. Actualmente, esta página no funcionará en Firefox hasta que admita HTML5 <input type="range"> .

Intenté reproducir el problema a menor escala en este jsFiddle . No es tan notable, pero se me ocurre cuando el lienzo tiene alrededor del 90% del ancho de ancho disponible.

El código requestAnimationFrame y el cambio de tamaño limpia el lienzo. Espero que se llame a la devolución de llamada antes de que se haya pintado el marco del navegador. Este no parece ser el caso, ya que el fondo blanco se muestra ocasionalmente durante el cambio de tamaño.

¿Hay algo que se pueda hacer para evitar esto?

Answer 1

Podría intentar usar un doble buffer. Aquí hay un buen artículo sobre algunas técnicas que puedes probar:

http://www.html5rocks.com/en/tutorials/canvas/performance/

Answer 2

Cuando establece canvas.width o canvas.height, borra el lienzo, combinado con el redibujado, esto causa el parpadeo que ve.

Puede mitigar esto en una medida razonable guardando el lienzo en un lienzo temporal antes de cambiar el tamaño y luego volver a dibujarlo de nuevo.

Aquí está mi función de cambio de tamaño:

    function resize(width, height) {
        //Create temp canvas and context
        var tempContext = Utils.Canvas.Create2DContext(context.canvas.width, context.canvas.height);

        //Draw current canvas to temp canvas
        tempContext.drawImage(context.canvas, 0, 0);

        //Resize current canvas
        context.canvas.height = height;
        context.canvas.width = width;

        //Draw temp canvas back to the current canvas
        context.drawImage(tempContext.canvas, 0, 0);
    }

Si cambias el tamaño a un tamaño más pequeño, entonces el lienzo temporal se "sobregira", por lo que completará por completo el lienzo actual. Sin embargo, si cambias el tamaño a un tamaño mayor, tu lienzo temporal solo rellenará parte del lienzo actual. La parte que no llena seguirá parpadeando a medida que se vuelva a dibujar.

Si quisieras hacerte un poco más elegante, podrías intentar dibujar un lienzo temporal del tamaño correcto (final) en lugar de simplemente copiar el lienzo actual. Esto sería más lento, pero bien podría eliminar todo parpadeo.

En mi caso estoy cambiando el tamaño para llenar un div, por lo que es tolerable tener un pequeño parpadeo a lo largo de los bordes inferior y derecho, y sin duda mucho mejor que todo el parpadeo.

EDITAR:

Aquí hay una actualización de su jsFiddle con mis cambios aplicados:

jsfiddle.net/Uz5Pt/13

¡Parece funcionar mejor que donde lo estoy usando en mi aplicación! Difícilmente se puede ver un destello en los pedazos de lienzo recién creados.