Las llamadas de sorteo de lienzo se están procesando fuera de secuencia

Tengo el siguiente código para escribir llamadas de dibujo a un lienzo de "búfer posterior" y luego colocarlas en un lienzo principal usando drawImage. Esto es con fines de optimización y para garantizar que todas las imágenes se coloquen en secuencia.

Antes de colocar el lienzo del búfer sobre el principal, estoy usando fillRect para crear un fondo azul oscuro en el lienzo principal.

Sin embargo, el fondo azul está representando después de los duendes Esto es inesperado, ya que estoy haciendo su llamada fillRect en el primer.

Aquí está mi código:

render: function() {
  this.buffer.clearRect(0,0,this.w,this.h);
  this.context.fillStyle = "#000044";
  this.context.fillRect(0,0,this.w,this.h);

  for (var i in this.renderQueue) {
    for (var ii = 0; ii < this.renderQueue[i].length; ii++) {
      sprite = this.renderQueue[i][ii];

      // Draw it!
      this.buffer.fillStyle = "green";
      this.buffer.fillRect(sprite.x, sprite.y, sprite.w, sprite.h);
    }
  }

  this.context.drawImage(this.bufferCanvas,0,0);
}

Esto también sucede cuando uso fillRect en el lienzo del búfer, en lugar del principal.

Cambiar globalCompositeOperation entre 'source-over' y 'destination-over' (para ambos contextos) no hace nada para cambiar esto.

Paradójicamente, si coloco el relleno azulRect dentro los bucles for anidados con las otras llamadas de sorteo, funciona como se esperaba ...

Gracias de antemano!

Anexo: Cambiar la operación compuesta comportarse como se esperaba, pero no para remediar este problema específico. Perdón por la ambigüedad.

preguntado el 30 de junio de 12 a las 22:06

2 Respuestas

Hay mucho que es sospechoso aquí.

En primer lugar, el doble almacenamiento en búfer de un lienzo no hace más que dañar el rendimiento al agregar complicaciones, todos los navegadores realizan el doble almacenamiento en búfer automáticamente, por lo que si ese es su objetivo aquí, no debería estar dibujando en un búfer.

Aquí hay un ejemplo de por qué no necesita doble almacenamiento en búfer: http://jsfiddle.net/simonsarris/XzAjv/

Entonces, para llegar al meollo del asunto, las líneas de javascript dentro de una función discreta no se quedan simplemente sin orden. Algo más está mal aquí.

Establecer un punto de interrupción en el drawImage resolvería esto casi instantáneamente, por lo que si no está familiarizado con las herramientas de desarrollo de Firebug o Chrome, le recomiendo que las eche un vistazo.

Supongo que el "azul" que está viendo es en realidad lo único que se dibuja en su lienzo de "amortiguación" y tal vez this.buffer no es en realidad el contexto del búfer.

Otra posibilidad es que this.w y this.h son accidentalmente muy pequeños, por lo que su inicial clearRect y fillRect al comienzo del método no están haciendo nada.

En cualquier caso, la especulación no es tan buena como abrir las herramientas de desarrollo y observar lo que está sucediendo.

Respondido 01 Jul 12, 02:07

Gracias: la creación de perfiles me ayudó a descubrir qué era y resultó que había una llamada de doble función. Corregido ahora, funcionando como se esperaba. En cuanto al doble almacenamiento en búfer, decidí probarlo, basándome en esto: aquí Información muy interesante. Solo muestra que tendré que hacer muchas pruebas antes de llamarlo bueno. :) - Tom murray

En términos generales, si necesita que las cosas estén en orden, use una matriz, no un objeto. No se garantiza que la iteración sobre un objeto sea en un orden particular.

Use una matriz y para (var i=0; i

Respondido 01 Jul 12, 02:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.