firefox和radialgradient(使用html5 canvas)

Question

出于某种原因,我的firefox在使用Canvas时没有显示径向渐变,有谁知道为什么？(我在其他计算机上没有这个问题)

这是我使用的一些代码:

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中有这个问题(已更新)

Answer 1

我不确定，但如果此代码在 FireFox 下的其他 PC 上工作，那么可能是您有旧版本的 FireFox 浏览器，或者在要加载 id 为“layer2”的 cavas 标记之前调用 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);