铬帆布线性渐变= Firefox的帆布线性渐变

好了，问题是下一个：铬帆布线性渐变= Firefox的帆布线性渐变

canvas = GreenCanvas.get(0).getContext('2d'); 
    grad = canvas.createLinearGradient(0,0,255,0); 
    grad.addColorStop(0, 'rgb('+r+','+0+','+b+')'); 
    grad.addColorStop(1, 'rgb('+r+','+255+','+b+')'); 
    canvas.fillStyle = grad; 
    canvas.fillRect(0,0,256,34);

256像素。从例如rgb（0,0,0）到rgb（0,255,0）

Chrome 6.0.472：梯度（0,0,0）（0,1,0）（0,2,0）（ 0,3,0）（0,4,0）...（0,255,0）

Firefox 3.6.6：gradient（0,0,0）（0,0,0）（0,1， 0）（0,2,0）...（0,255,0）

我想看看谁在firefox中使用梯度函数。但无论如何，我想知道它是一个真正的问题，还是在Firefox中，渐变是以这种方式完成的。或者，如果它存在另一种方式，可以在不使用太多内存的情况下完成良好的渐变。

来源

2010-10-22 A.Quiroga

我不确定你说的问题是什么？变量r和b来自哪里？你有两张浏览器的外观截图吗？ – robertc 2010-10-22 12:29:47

问题是，在Firefox中，当你尝试从0..255颜色编号时，它重复第一个 – 2010-10-22 22:31:03

据了解，Chrome目前在Canvas渐变方面存在问题。

我向Chromium提交了一个错误，因为有多少hixie（规范编写器）测试在Chrome上失败。

总之，你不能让你的'grad'变量。你必须直接设置它。

这工作：

var context = document.getElementsByTagName('canvas')[0].getContext('2d'); 
    context.fillStyle = context.createLinearGradient(0, 0, 500, 300); 
    context.fillStyle.addColorStop(0, '#0000ff'); 
    context.fillStyle.addColorStop(1, '#ff00ff'); 
    context.fillRect(0, 0, 500, 300);

这不工作，即使他们应该做同样的事情：

var context = document.getElementsByTagName('canvas')[0].getContext('2d'); 
    var g = context.createLinearGradient(0, 0, 500, 300); 
    g.addColorStop(0, '#0000ff'); 
    g.addColorStop(1, '#ff00ff'); 
    context.fillStyle = g; 
    context.fillRect(0, 0, 500, 300);

现在，只要做到这一点的第一种方式。

这是9月初提交的错误报告。

http://code.google.com/p/chromium/issues/detail?id=54070&can=4&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

来源

2010-10-22 15:41:19

mmm，但问题出在Firefox与Chrome不同。无论如何，生病试图以这种方式来看待差异，并且明天病答应答（这里现在已经晚了） – 2010-10-22 22:33:00

铬帆布线性渐变= Firefox的帆布线性渐变

回答

相关问题