2010-10-08 15 views
5

En un simple análisis de la lona que creé para fines de rendimiento y medición de la calidad, un canvas está pintado con colores aleatorios e imágenes durante un período ilimitado.canvas de HTML5: Códigos de Salida Los mismos resultados diferentes en distintos navegadores

Una muestra se muestra aquí: http://litterific.com/minisite/

Advertencia: Sólo abrir esta en Opera o Chrome, el guión es bastante pesado puede colgar en computadoras lentas, no deje el script en ejecución mientras se están tomando café;)) Es solo un prototipo aproximado y no lo optimizó.

Lo que he notado aquí es que los resultados tal como están pintados por el script (js/asset.js) son diferentes en varios navegadores. Especialmente en Opera hay mucho más "verde" en la pintura que en Chrome

alt text

código se encuentra aquí: http://litterific.com/minisite/js/asset.js

Mi pregunta es:

Cómo esto es causado . Diferentes semillas al azar? ¿Diferente redondeo o comportamiento de color diferente en Opera?

Nota: Es exactamente la misma secuencia de comandos en ambos navegadores, por lo que quizás podría echarle un vistazo tanto en Chrome como en Opera.

+0

La primera cosa que me gustaría tratar es utilizar un generador de números aleatorios alternativa para los que pueden proporcionar una semilla, o simplemente utilizar la misma matriz de vincularse de números, de modo que ambos navegadores reciben la misma entrada. – RoToRa

+0

Intenté esto en Firefox 3.6. El rendimiento no es * demasiado * malo - tartamudea un poco (supongo que la recolección de basura), pero hay resultados, y es bastante rojizo, con un poco de negro, como Chrome. http://dl.dropbox.com/u/1722364/Screenshot-3.png –

Respuesta

6

No es números aleatorios que causan los problemas, que es "gracioso" datos de píxeles. Aquí está el cambio:

for (i = 0, n = pixels.data.length; i < n; i += 4){ 
    pixels.data[i + 0] = Math.max(0, Math.min(255, Math.floor(r * f))); 
    pixels.data[i + 1] = Math.max(0, Math.min(255, Math.floor(g * f))); 
    pixels.data[i + 2] = 0; 
    pixels.data[i + 3] = pixels.data[i + 3]; 
} 

Si se asegura de que los valores de píxel sean enteros en el rango correcto, Opera funciona bien.

Oh también, y esto es probablemente obvio, que va mucho más rápido si usted torno esas multiplicaciones fuera del circuito.

+0

Sospeché algo como esto. eso significa que todos los valores superiores a 255 en pixels.data [0] se ponen en pixels.data [1] (y se multiplican por 255)? entonces {pixels.data [0] = 300} sería lo mismo que {pixels.datos [0] = 255, pixels.data [1] = 45}? Eso tiene sentido ya que Javascript no conoce los tipos numéricos entre 0 y 255, sino solo "enteros". (en el caso de la ópera, eso hace que la matriz sea bastante inútil, ya que en la ópera solo deben llenarse los primeros datos de píxeles, picar colores en C# o PHP) pero está algo "fijo" en Chrome. También dejé esta pregunta en Opera, quizás es algún tipo de problema sin terminar. –

+0

No estoy seguro de lo que sucede; Es posible que tenga razón en que el valor "se derrama" en otras celdas de color, pero es difícil decirlo con exactitud. (Supongo que podrías averiguarlo por experimentación.) – Pointy

+0

Sí, tienes razón, vamos a cuidar de eso. gracias por sus esfuerzos de todos modos, muy apreciado. Lo probé un poco y confirmaste mi sospecha. Bounty se aplicará en 17 horas a partir de ahora;) –

1

Como has adivinado, Math.random comienza con una semilla diferente en cada caso. Desafortunadamente, no hay forma de proporcionar una semilla fija a la función Math.random. Si realmente lo necesita, tendrá que encontrar uno o implementarlo usted mismo.

he notado que diferentes implementaciones de lona hacen variar ligeramente en la elaboración de objetos parcialmente opacas, pero eso es un problema menor en comparación con sus secuencias aleatorias diferentes!

Por cierto, la secuencia de comandos no produce buena salida buscando :)

+0

He probado con los números de civil ... sigue produciendo la salida diferente, también en un bucle. –

+0

Gracias por probar de todos modos;) –