firefox and radialgradient（html5キャンバスを使用）

Question

何らかの理由で、キャンバスを使用しているときに私のファイアフォックスに放射状のグラデーションが表示されないのはなぜですか？

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更新）

をここ

を使用してコード - 私の一部である（私は他のコンピュータでこの問題を持ってドント）

Answer 1

私はこのコードがFireFoxの下にある他のPCで動作するのであれば、ロードするidが "layer2"のcavasタグの前にFireFoxブラウザの古いバージョンを持っていたり、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); 

Answer 2

ヶ月間検索した後、私は今、このとらえどころのない質問への答えを持っています。 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

Answer 3

FirefoxでSVGとradialGradientsで奇妙な問題が見つかりました。私がCSSクラスの塗りつぶしを定義し、それがうまく動作する文書にCSSを埋め込むと、CSSを別のファイルに移動して 'link'タグを使用してCSSを含めると、radialGradientは機能しません。これは、Firefoxではなく、Chrome、Safari、Opera、さらにはIEで動作するFirefoxのバグのようです。