HTML5 canvas: один и тот же код выводит разные результаты в разных браузерах - PullRequest
Новая
       15

HTML5 canvas: один и тот же код выводит разные результаты в разных браузерах

5 голосов
/ 08 октября 2010

В простом тесте холста, который я создал для измерения производительности и качества, canvas окрашивается случайными цветами и изображениями в течение неограниченного периода времени.

Образец показан здесь: http://litterific.com/minisite/

Предупреждение : открывайте только в Opera или Chrome, скрипт довольно тяжелый, может зависать на медленных компьютерах, не оставляйте скрипт запущенным, пока вы пьете кофе;)) Это просто грубый прототип и не оптимизировать его.

Здесь я заметил, что результаты, нарисованные сценарием (js/asset.js), отличаются в разных браузерах. Особенно в Opera гораздо больше «зеленых» в картине, чем в Chrome

alt text

код находится здесь: http://litterific.com/minisite/js/asset.js

Мой вопрос:

Как это вызвано. Разные случайные семена? Разное округление или разное цветовое поведение в Opera?

Примечание. Это одинаковый скрипт в обоих браузерах, поэтому, возможно, вы могли бы взглянуть на него как в Chrome, так и в Opera.

Ответы [ 2 ]

6 голосов
/ 11 октября 2010

Это не случайные числа, вызывающие проблемы, это «забавные» данные пикселей.Вот изменение: 

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]; 
}

Если вы убедитесь, что значения пикселей являются целыми числами в нужном диапазоне, Opera работает нормально.

Да, также, и это, вероятно, очевидно, это очень многобыстрее, если вы вывести эти умножения из цикла.

1 голос
/ 08 октября 2010

Как вы уже догадались, Math.random начинается с разных семян в каждом случае. К сожалению, нет способа обеспечить фиксированное начальное значение для функции Math.random. Если вам это действительно нужно, вам придется найти его или реализовать самостоятельно.

Я заметил, что различные реализации canvas немного отличаются при рисовании частично непрозрачных объектов, но это незначительная проблема по сравнению с вашими различными случайными последовательностями!

Кстати, ваш скрипт выдает красивый результат:)

...