Firefox和的RadialGradient（使用HTML5畫布）

出於某種原因，我的Firefox doesn't顯示徑向漸變使用畫布的時候，沒有人知道爲什麼嗎？（我不擁有其他計算機上的這個問題）Firefox和的RadialGradient（使用HTML5畫布）

這裏是一些代碼I'm的使用：

var canvas = document.getElementById ("layer2") ; 
var context = canvas.getContext ("2d") ; 
var radgrad2 = context.createRadialGradient(x, y, 15 ,x-30,y-60, 0); 
radgrad2.addColorStop(0, aux.color , .5); 
radgrad2.addColorStop(0.75, "#ffffff" , .5); 
radgrad2.addColorStop(.5, "#ffffff" , .5); 
context.fillStyle = radgrad2;

PS：我只在Firefox（it's更新）

有這個問題

來源

2011-12-26 Camilo Barraza

我遇到了同樣的問題（Firefox 11）：http://i.imgur.com/ZSfEL.png – nak 2012-03-30 19:08:08

看起來像Firfox已經在版本11中正式解決了這個問題。所以不需要再使用下面的解決方案了。 – 2012-05-02 02:21:14

香港專業教育學院更新了我的Firefox和仍然沒有運氣...怪異 – 2012-05-02 05:27:03

我不知道，但如果火狐在其他電腦這個代碼工作，那麼可能是你已經或ID爲「二層」要加載的卡瓦酒標籤之前的老版本的火狐瀏覽器調用的document.getElementById。我注意到的另一個問題是，你使用浮點數而不是前導零。例如0.5而不是0.5。當你運行這段代碼時會發生什麼？

window.addEventListener("load", function() { 
      var canvas = document.getElementById ("layer2") ; 
      if(!canvas.getContext) { 
       alert("Your browser don't support canvas."); 
      throw new Error("Your browser don't support canvas."); 
      } 
      var context = canvas.getContext ("2d") ; 
      var radgrad2 = context.createRadialGradient(x, y, 15 ,x-30,y-60, 0); 
      radgrad2.addColorStop(0, aux.color , 0.5); 
      radgrad2.addColorStop(0.75, "#ffffff" , 0.5); 
      radgrad2.addColorStop(0.5, "#ffffff" , 0.5); 
      context.fillStyle = radgrad2; 

}, false);

來源

2011-12-26 13:59:03

在Firefox上，當我用正常顏色的帆布工作正常，但是當我使用梯度一切都變成白色，I'm只能看到招。 – 2011-12-28 19:49:04

這是因爲漸變失敗，而是默認爲白色填充。 – 2012-05-02 02:22:04

經過幾個月的搜索，我現在已經回答了這個難以捉摸的問題。 Mozilla改變了他們的徑向漸變的工作方式。要創建簡單的徑向漸變，不再需要創建路徑。您只需填寫一個矩形。請參閱下面的代碼示例：

var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); 
radgrad2.addColorStop(0, '#FF5F98'); 
radgrad2.addColorStop(0.75, '#FF0188'); 
radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); 

ctx.fillStyle = radgrad2; 
ctx.fillRect(0,0,150,150);

此方法比使用徑向漸變創建路徑的效率高得多。儘管如此，我也可以看到這種方法對開發人員來說更加有限制。看到來自Mozilla的開發者網絡這個例子對於一個更好的例子：https://developer.mozilla.org/samples/canvas-tutorial/4_10_canvas_radialgradient.html

來源

2012-04-01 16:38:48

我發現一個奇怪的問題，在Firefox中使用SVG和radialGradients。如果我定義CSS類的填充和嵌入CSS到文檔中它工作正常，但是如果我移動到CSS一個單獨的文件，並使用「鏈接」標籤包括CSS，那麼的RadialGradient不起作用。這似乎是Firefox中的一個錯誤，因爲它可以在Chrome，Safari，Opera甚至IE中使用，但不能在Firefox中使用。

來源

2014-10-10 11:19:18 SPlatten

這似乎不是這個問題的答案，這是關於畫布。 – 2014-10-10 14:12:30

Firefox和的RadialGradient（使用HTML5畫布）

回答

相關問題