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

发布于 2024-12-10 08:12:34 字数 218 浏览 0 评论 0原文

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

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

有谁知道为什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伴我心暖 2024-12-17 08:12:34

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

createRadialGradient works on Firefox, but addColorStop does not work completely - and will throw an exception if you pass in a transparency along with your color.

For example, after you create a radial gradient:

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);

The above works great on chrome, but will not work on FF because of the 0.7 in the rgba color.

So, I use something like:

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

This doesn't make gradients look quite so nice on FF, but functions.

Of course, you should cache that $.browser.mozilla earlier - make a var IS_MOZILLA = $.browser.mozilla; and then just use that (so that you minimize class calls... as saving every computation in complex drawing calls is important).

回复收藏 0 原文

~没有更多了~