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浏览器或调用document.getElementById之前要加载id为“layer2”的cavas标记。我注意到的另一个问题是你使用浮点数而没有前导零。例如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移动到单独的文件中并使用＆＃39;链接＆＃39;标记包含CSS，然后radialGradient不起作用。这似乎是Firefox中的一个错误，因为它适用于Chrome，Safari，Opera甚至IE，但不适用于Firefox。

firefox和radialgradient（使用html5 canvas）

3 个答案: