6

出于某种原因，我的 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 中遇到这个问题（它已更新）

4

3 回答 3

0

我不确定，但如果此代码在 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);
于 2011-12-26T13:59:03.753 回答
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 中使用 SVG 和radialGradients 发现了一个奇怪的问题。如果我在 CSS 类中定义填充并将 CSS 嵌入到文档中它可以正常工作，但是如果我将 CSS 移动到单独的文件中并使用“链接”标签包含 CSS，那么径向渐变不起作用。这似乎是 Firefox 中的一个错误，因为它适用于 Chrome、Safari、Opera 甚至 IE，但不适用于 Firefox。

于 2014-10-10T11:19:18.130 回答