为什么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; 然后使用它（这样就可以最大程度地减少类调用……因为将每个计算都保存在复杂的图形调用中很重要）。