javascript - 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。 我注意到的另一个问题是您使用不带前导零的 float 。例如 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);