6

何らかの理由で、Canvas を使用しているときに私の Firefox に放射状のグラデーションが表示されません。その理由は誰にもわかりません。(他のコンピュータではこの問題は発生しません)

ここに私が使用しているコードの一部があります:

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 でのみ発生します (更新されています)。

4

3 に答える 3

0

何ヶ月も探した後、私は今、このとらえどころのない質問に対する答えを持っています. 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-01T16:38:48.897 に答える
0

よくわかりませんが、このコードが FireFox の下の他の PC で動作する場合は、古いバージョンの FireFox ブラウザを使用しているか、id「layer2」の cavas タグをロードする前に document.getElementById を呼び出している可能性があります。私が気づいたもう 1 つの問題は、先頭にゼロを付けずに浮動小数点数を使用していることです。たとえば、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-26T13:59:03.753 に答える