Chrome Canvas 线性渐变 != Firefox Canvas 线性渐变

发布于 2024-09-28 14:13:01 字数 618 浏览 1 评论 0原文

好吧，问题是下一个：

   canvas = GreenCanvas.get(0).getContext('2d');
   grad = canvas.createLinearGradient(0,0,255,0);
   grad.addColorStop(0, 'rgb('+r+','+0+','+b+')');
   grad.addColorStop(1, 'rgb('+r+','+255+','+b+')');
   canvas.fillStyle = grad;
   canvas.fillRect(0,0,256,34);

256 像素。例如从 rgb(0,0,0) 到 rgb(0,255,0)

Chrome 6.0.472：渐变 (0,0,0) (0,1,0) (0,2,0) (0,3, 0) (0,4,0) ... (0,255,0)

Firefox 3.6.6: 渐变 (0,0,0) (0,0,0) (0,1,0) (0,2,0 ) ... (0,255,0)

我想看看谁在 firefox 中编写了渐变函数。但无论如何，我想知道这是否是一个真正的问题，或者在 Firefox 中渐变是这样完成的。或者是否存在另一种方式可以在不使用太多内存的情况下完成出色的渐变。

原文

Well , the problem is the next :

   canvas = GreenCanvas.get(0).getContext('2d');
   grad = canvas.createLinearGradient(0,0,255,0);
   grad.addColorStop(0, 'rgb('+r+','+0+','+b+')');
   grad.addColorStop(1, 'rgb('+r+','+255+','+b+')');
   canvas.fillStyle = grad;
   canvas.fillRect(0,0,256,34);

256 pixels . from for example rgb(0,0,0) to rgb(0,255,0)

Chrome 6.0.472: gradient (0,0,0) (0,1,0) (0,2,0) (0,3,0) (0,4,0) ... (0,255,0)

Firefox 3.6.6: gradient (0,0,0) (0,0,0) (0,1,0) (0,2,0) ... (0,255,0)

i would like to see who programs that gradient function in firefox . But anyway , i would like to know if its a real problem , or is that in firefox the gradient is done that manner. Or if it exist another manner to do a well done gradient without using too much memory.

分享到QQ

分享到微博

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

发布评论

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

我的痛♀有谁懂 2024-10-05 14:13:01

众所周知，Chrome 目前在 Canvas 渐变方面存在问题。

我向 Chromium 提交了一个错误，因为很多 hixie（规范编写者）测试在 Chrome 上失败了。

简而言之，你不能让你的“grad”变量。你必须直接设置它。

这行得通：

   var context = document.getElementsByTagName('canvas')[0].getContext('2d');
   context.fillStyle = context.createLinearGradient(0, 0, 500, 300);
   context.fillStyle.addColorStop(0, '#0000ff');
   context.fillStyle.addColorStop(1, '#ff00ff');
   context.fillRect(0, 0, 500, 300);

这行不通，尽管他们应该做同样的事情：

   var context = document.getElementsByTagName('canvas')[0].getContext('2d');
   var g = context.createLinearGradient(0, 0, 500, 300);
   g.addColorStop(0, '#0000ff');
   g.addColorStop(1, '#ff00ff');
   context.fillStyle = g;
   context.fillRect(0, 0, 500, 300);

现在，只用第一种方法。

这是九月初提交的错误报告。

http://code.google.com/p/chromium/issues/detail?id=54070&can=4&colspec=ID%20Stars%20Pri%20Area%20Feature %20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

It's known that Chrome has problems with the Canvas gradients at the moment.

I submitted a bug to Chromium because of how many of hixie's (the specification writer) tests were failing on Chrome.

In short, you can't make your 'grad' variable. You have to set it directly.

This works:

   var context = document.getElementsByTagName('canvas')[0].getContext('2d');
   context.fillStyle = context.createLinearGradient(0, 0, 500, 300);
   context.fillStyle.addColorStop(0, '#0000ff');
   context.fillStyle.addColorStop(1, '#ff00ff');
   context.fillRect(0, 0, 500, 300);

This does NOT work, even though they are SUPPOSED to do the same thing:

   var context = document.getElementsByTagName('canvas')[0].getContext('2d');
   var g = context.createLinearGradient(0, 0, 500, 300);
   g.addColorStop(0, '#0000ff');
   g.addColorStop(1, '#ff00ff');
   context.fillStyle = g;
   context.fillRect(0, 0, 500, 300);

For now, just do it the first way.

Here's the filed bug report from early September.

http://code.google.com/p/chromium/issues/detail?id=54070&can=4&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

回复收藏 0 原文

~没有更多了~