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

Question

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

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

警告:只有在Opera或Chrome中打开它,脚本很重,可以挂在慢速计算机上,不要在你喝咖啡时让脚本保持运行;))它只是一个粗略的原型而没有优化它.

我在这里注意到,脚本(js/asset.js)绘制的结果在各种浏览器中是不同的.特别是在Opera 中,绘画中的"绿色"比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可以正常工作.

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