javascript - 为什么 createRadialGradient 在 Firefox 上不起作用？

Question

我正在使用 HTML5 和 JavaScript 的 canvas 标签来访问 canvas 方法和属性。

此代码适用于 Chrome，但不适用于 Firefox：http: //jsfiddle.net/thirtydot/BD3xA/。

有谁知道为什么？

Answer 1

createRadialGradient 在 Firefox 上工作，但 addColorStop 不能完全工作 - 如果你将透明度与颜色一起传递，则会抛出异常。

例如，在创建径向渐变后：

var grad = ctx.createRadialGradient(centerX,centerY,outRadius,centerX,centerY,outRadius+pad);
var colorOut="rgba(100,200,100,0.7)";
grad.addColorStop(0,'rgba(0,0,0,0)');
grad.addColorStop(0.01,colorOut);

以上在 chrome 上效果很好，但在 FF 上不起作用，因为 rgba 颜色中的 0.7。

所以，我使用类似的东西：

colorOut= ($.browser.mozilla)?'#D88':'rgba(200,100,100,0.7);';

这不会使渐变在 FF 上看起来非常好，但功能。

当然，您应该更早地缓存 $.browser.mozilla - 创建一个 var IS_MOZILLA = $.browser.mozilla; 然后就使用它（这样你就可以最小化类调用......因为在复杂的绘图调用中保存每个计算很重要）。