firefox 和radialgradient（使用html5画布）答案

【问题标题】：firefox and radialgradient (using html5 canvas)firefox 和radialgradient（使用html5画布）
【发布时间】：2012-01-27 23:59:28
【问题描述】：

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

【问题讨论】：

我遇到了同样的问题（Firefox 11）：i.imgur.com/ZSfEL.png
看起来 Firfox 已经在版本 11 中正式修复了这个问题。所以不需要再使用我的解决方案了。
我更新了我的 Firefox，但仍然没有运气......奇怪

标签： javascript html firefox canvas radial-gradients

【解决方案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);

【讨论】：

在 Firefox 上，当我使用普通颜色时，画布可以正常工作，但是当我使用渐变时，一切都变成了白色，我只能看到笔触。
这是因为渐变失败并默认为白色填充。

【解决方案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

【讨论】：

【解决方案3】：

我在 Firefox 中使用 SVG 和radialGradients 发现了一个奇怪的问题。如果我在 CSS 类中定义填充并将 CSS 嵌入到文档中它可以正常工作，但是如果我将 CSS 移动到单独的文件中并使用“链接”标签包含 CSS，那么径向渐变不起作用。这似乎是 Firefox 中的一个错误，因为它适用于 Chrome、Safari、Opera 甚至 IE，但不适用于 Firefox。

【讨论】：

这似乎不是这个问题的答案，这是关于画布的。