HTML5画布：相同的代码在不同的浏览器中输出不同的结果

Question

在我为性能和质量测量目的而创建的简单画布测试中，canvas在无限期内使用随机颜色和图像绘制。

此处显示了一个示例：http://litterific.com/minisite/

  

警告：只在Opera或Chrome中打开它，脚本很重，可以挂在慢速计算机上，不要让脚本在你喝咖啡时运行;））它只是一个粗略的原型，并没有优化它。

我在这里注意到，脚本（js/asset.js）绘制的结果在各种浏览器中都有所不同。特别是在Opera中，绘画中的“green”比Chrome中更多

代码可在此处找到：http://litterific.com/minisite/js/asset.js

我的问题是：

这是怎么造成的。不同的随机种子？ Opera中不同的舍入或不同的颜色行为？

注意：两个浏览器中的脚本完全相同，所以也许您可以在Chrome和Opera中查看它。

Answer 1

这不是导致问题的随机数字，而是“有趣”的像素数据。这是改变：

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

哦，这也许很明显，如果你将这些乘法提升出循环，它会更快。

Answer 2

正如您所猜测的，Math.random在每种情况下都以不同的种子开头。遗憾的是，无法为Math.random函数提供固定种子。如果你确实需要，你必须自己找一个或实现它。

我注意到在绘制部分不透明的对象时，不同的画布实现确实略有不同，但与不同的随机序列相比，这是一个小问题！

顺便说一下，你的脚本确实产生了漂亮的输出：）