Canvas: производительность и createRadialGradient

Question

[joger]

Здравствуйте,
пример:
ограничиваем холст шестиугольником
ctx.save();
ctx.translate(x+2*heightX,y);
ctx.beginPath();
ctx.moveTo(0-2*heightX,0);
ctx.lineTo(0-heightX,0-heightY);
ctx.lineTo(heightX,0-heightY);
ctx.lineTo(2*heightX,0);
ctx.lineTo(heightX,heightY);
ctx.lineTo(0-heightX,heightY);
ctx.closePath();
ctx.clip();

добавляем градиент
var gr = ctx.createRadialGradient(0,heightY,15,0,0,25);
gr.addColorStop(0.0,'#0F0');
gr.addColorStop(1.0,'#0DA805');
ctx.fillStyle = gr;

рисуем площадь, ограниченную кривой Безье
ctx.moveTo(0-heightX,0+heightY);
ctx.bezierCurveTo((0-heightX)-f3,(0+heightY)-f4,heightX+f3,(0+heightY)-f4,heightX,0+heightY);
ctx.closePath();

ctx.fill();


всё вроде бы просто, но в IE+FF этот код выполняется в 10-20 раз медленнее, чем в Chrome.
Можно или как нибудь это оптимизировать? Буффер вроде бы не подходит, т.к. много цветов+фигуру надо «вертеть»

RadialGradient: если один из радиусов градиента выходит за границы холста, то ФФ и ИЕ градиент не рисуют вообще. можно ли это как-то обойти?
пример здесь: dino.fornax.uberspace.de/test/

Answer 1

[Павло Пономаренко]

Проблема очень проста — если внутренний круг пересекается или выходит за пределы внешнего — в Файрфоксе начинается некорректная работа.

Центр внутреннего круга в 64-64 — ещё работает
Центр внутреннего круга в 65-65 — уже не работает

Осилить проблему можно на примере нижнего круга: libcanvas.github.com/ui/gradients.html (потягайте его в Хроме и Фоксе). Скорее всего — это баг.

Решение — не заходить внутренним кругом за пределы внешнего.

Comments

[joger]

вот примерно такую ошибку(?) я и искал. спасибо огромное!

Answer 2

[Павло Пономаренко]

Буфер тоже можно вертеть) Много цветов — вы имеете ввиду, что много цветов будет или много цветов сейчас? Градиент вообще затратная операция. Таки задумайтесь о кешировании. Я крайне сомневаюсь, что у вас что-то выйдет без него. И сразу же решите проблему с «если один из радиусов градиента выходит за границы холста»

Comments

[joger]

буфер дал скорости, но проблема с выходящим за clip() градиентом к сожалению осталась dino.fornax.uberspace.de/test/index2.html

[ArtemSmirnov]

Может быть стоит сначала нарисовать градиент, а затем создать pattern, и установить его как стиль.

[Павло Пономаренко]

Простите, а где баг?

[joger]

в Хроме есть градиент, в ИЕ(9) и ФФ(4) нет.

[joger]

@ArtemSmirnov надо попробовать.

[Павло Пономаренко]

Напишите мне в Jabber: [e-mail], посмотрим что можно сделать.
И да, рекомендую использовать LibCanvas, код будет намного приятнее.

Answer 3

[joger]

я начинаю немного сходить с ума…
пытался воспользоваться советом Артёма и нарисовать простую картинку с градиентом в качестве заготовки.
Код:
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.lineTo(100,100);
ctx.lineTo(0,100);
ctx.lineTo(0,0);
ctx.closePath();

var gr = ctx.createRadialGradient(75,75,20,50,50,40);
gr.addColorStop(0.0,'#0F0');
gr.addColorStop(1.0,'#0DA805');
ctx.fillStyle = gr;
ctx.fill();

чтобы должно быть, можно себе представить. а вот что рисуют наши браузеры:
dino.fornax.uberspace.de/test/index3.html
где-то здесь элементарная ошибка, но я её в упор не вижу…

Comments

[ArtemSmirnov]

Это вообще что-то с чем то, вы нашли кучу багов в firefox-e

[ArtemSmirnov]

Или багов в хроме, сейчас буду перечитывать стандарт чтобы понять где ошибка

[ArtemSmirnov]

у вас код весь вполне правильный, даже если сделать самопалевную отрисовку прямоугольника

ctx.beginPath();
ctx.rect(0, 0, 100, 100);

Все равно в лисе рисует черти что, по крайней мере в пятой.

Answer 4

[Павло Пономаренко]

Тестовый стенд: jsfiddle.net/8H24M/

Answer 5

[dom1n1k]

Очевидно же — у браузеров сносит крышу, когда окружности, задающие градиент, пересекаются.

Считать ли это багом браузеров или багом спецификации Canvas, допускающей такие неоднозначности — вопрос философский.