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帆布：在不同的浏览器

回答

相关问题