Линейный градиент Chrome Canvas! = Линейный градиент Firefox Canvas - PullRequest
Новая
       12

Линейный градиент Chrome Canvas! = Линейный градиент Firefox Canvas

2 голосов
/ 22 октября 2010

Ну, проблема в следующем: 

   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)

Хром 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 градиент делается таким образом. Или, если существует другой способ сделать хорошо сделанный градиент, не используя слишком много памяти.

1 Ответ

1 голос
/ 22 октября 2010

Известно, что в 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

...