Question

嗯，问题是下一个：

   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中，渐变是以这种方式完成的。或者，如果存在另一种方式来做一个完美的渐变而不使用太多的内存。

Answer 1

众所周知，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);

目前，只是第一种方式。

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

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

Chrome Canvas Linear Gradient！= Firefox Canvas Linear Gradient

1 个答案: