HTML5帆布：在不同的瀏覽器

在我的性能和質量測量目的創建了一個簡單畫布測試相同的代碼輸出不同的結果，一個canvas期間無限期塗上隨機顏色和圖像。HTML5帆布：在不同的瀏覽器

樣本如下所示：http://litterific.com/minisite/

警告：只有在Opera或Chrome打開此，腳本是相當沉重的可以掛起來較慢的計算機上，不要離開運行腳本，而你正在喝咖啡;））這只是一個粗糙的原型，並沒有優化它。

我在這裏注意到的是，由腳本繪製的結果（js/asset.js）在不同的瀏覽器中是不同的。尤其是在戲中有畫更「綠色」比在Chrome

alt text

代碼這裏找到：http://litterific.com/minisite/js/asset.js

我的問題是：

這是怎麼引起的。不同的隨機種子？ Opera中不同的舍入或不同的顏色行爲？

注：正是在這兩種瀏覽器相同的腳本，所以也許你可以在這兩個Chrome和Opera它看看。

來源

2010-10-08 Caspar Kleijne

我想嘗試的第一件事就是使用替代的隨機數發生器，您可以提供種子，或者僅使用相同的數字預生成的陣列，使兩種瀏覽器得到相同的輸入。 – RoToRa 2010-10-08 09:00:24

我在Firefox 3.6中試過這個。性能不是太糟糕 - 它有點結局（我猜垃圾收集），但有結果，它很紅，有一點像Chrome一樣的黑色。 http://dl.dropbox.com/u/1722364/Screenshot-3.png – 2010-10-11 08:27:32

這不是造成問題，這是「可笑」的像素數據的隨機數。這裏的變化：

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工作正常。

哦也，這可能是顯而易見的，它會快很多，如果你扯起這些乘法圈外。

來源

2010-10-11 13:58:57 Pointy

我懷疑這樣的事情。這意味着pixels.data [0]中所有大於255的值都將放入pixels.data [1]（並乘以255）？因此{pixels.data [0] = 300}與{像素相同。data [0] = 255，pixels.data [1] = 45}？這是有道理的，因爲Javascript不知道0到255之間的數字類型，但只有「整數」。（在opera的情況下，這使得數組非常無用，因爲在opera中只有第一個像素數據需要填充，有點像C＃或PHP中的顏色），但在Chrome中有點「固定」。我也在Opera上拋棄了這個問題，也許這是一個未完成的問題。 – 2010-10-11 14:28:40

我不知道會發生什麼;你可能是正確的，價值「溢出」到其他顏色的單元格中，但很難說清楚。（我想你可以通過實驗來弄清楚。） – Pointy 2010-10-11 14:34:12

是的，你說的對，要去照顧那個。無論如何感謝你的努力，非常感謝。測試了一下，你證實了我的懷疑。賞金將在17個小時後開始申請;） – 2010-10-11 14:36:40

正如你猜到了，開始的Math.random在每種情況下不同的種子。不幸的是沒有辦法爲Math.random函數提供一個固定的種子。如果你真的需要這個，你必須找到一個或自己實現它。

我注意到，不同的畫布實現都略有不同繪圖部分不透明的對象時，但相對於你的不同的隨機序列這是一個小問題！

順便說一句，你的腳本只產生好看的輸出:)

來源

2010-10-08 08:53:09 andrewmu

我用簡單的數字進行了測試...仍然在循環中產生不同的輸出。 – 2010-10-11 08:12:35

感謝您的測試;） – 2010-10-11 14:35:58

HTML5帆布：在不同的瀏覽器

回答

相關問題