鉻帆布線性漸變= 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的帆布線性漸變

回答

相關問題