Comments 22
Существуют ли какие-то секретные библиотеки, умеющие рисовать градиентную раскраску линий. Ну то есть чтобы цвет плавно менялся между узлами вдоль линии, не обязательно прямой. Такая функция есть, например, в OpenGL.
g = ctx.createLinearGradient(s.x, s.y, f.x, f.y);
g.addColorStop(0, "red");
g.addColorStop(1, "green");
ctx.strokeStyle = g;
где s = startPoint и f = finalPoint
Да, этот вариант очевиден (вопрос из топика задан мной), но он работает только для прямых. А вот как быть с кривыми Безье? Да если к тому же градиент имеет более 2 колор-стопов, и они не совпадают с узлами кривой?
Я размышлял, можно ли это накостылить существующим функционалом? Например, разбить кривую на мелкие сегменты и апроксимировать градиент мелкими линейными кусочками. Но как ни крути, это именно костыль, причем грубый:
1. Много громоздкой математики
2. Огромный объем мутного для чтения кода
3. Проблемы со сглаживанием линии
4. Проблемы с корректной отрисовкой концов линии
5. Проблемы с полупрозрачными линиями
6. Из-за пиксельных округлений дроблёная линия может немного искажаться по сравнений с исходной
Ну и т.д. Думаю, полноценно решить этот вопрос можно только попиксельным рисованием, на гораздо долее низком уровне абстракции. Задача нетривиальна.
Я размышлял, можно ли это накостылить существующим функционалом? Например, разбить кривую на мелкие сегменты и апроксимировать градиент мелкими линейными кусочками. Но как ни крути, это именно костыль, причем грубый:
1. Много громоздкой математики
2. Огромный объем мутного для чтения кода
3. Проблемы со сглаживанием линии
4. Проблемы с корректной отрисовкой концов линии
5. Проблемы с полупрозрачными линиями
6. Из-за пиксельных округлений дроблёная линия может немного искажаться по сравнений с исходной
Ну и т.д. Думаю, полноценно решить этот вопрос можно только попиксельным рисованием, на гораздо долее низком уровне абстракции. Задача нетривиальна.
такие оптимизации, которые в SVG невозможны, например отрисовка из кешаВозможны.
Ну тут вопрос скорее стоит кто его поддерживает? Для svg есть хорошая библиотека raphael, как то ей пользовался, работает и в ie за счет использования VML.
Говоря о canvas не думаю что кому-то охота мучиться с ie, да и плюшки канвы там работать не будут.
Думаю что конкурент canvas сейчас больше SVG нежели флеш, так как на флеше обычно реализуют довольно сложные игрушки (да и удобней это там делать пока. объективно), нежели простую анимацию.
Автору спасибо за пост, услышать конкретные ответы на насущные темы всегда полезно.
Говоря о canvas не думаю что кому-то охота мучиться с ie, да и плюшки канвы там работать не будут.
Думаю что конкурент canvas сейчас больше SVG нежели флеш, так как на флеше обычно реализуют довольно сложные игрушки (да и удобней это там делать пока. объективно), нежели простую анимацию.
Автору спасибо за пост, услышать конкретные ответы на насущные темы всегда полезно.
Работает только в Опере, управлять практически нереально, например я хочу сделать игру «танчики» с видом сверху. Я отрисовываю тело одного танка в буфер плюс башню в буфер и все танки рисуются не как векторные объекты, а как два спрайта. Как это сделать на SVG?
Упомянутая книжка от O'Reilly действительно неплохая. Там рассмотрены почти все базовые вопросы — работа с мышью, спрайтовая анимация, базовая физика (трение и гравитация), реализовано несколько простеньких игр. Есть даже про взаимодействие с video и работа со звуком:)
Canvas — низкоуровневое API для отрисовки графики. Поддерживается всеми современными браузерами. Естественно, не поддерживается IE.
Павел, зачем в первой же строчке откровенная неправда?
Спасибо за статью. Очень полезная. Как раз у меня стажёр в этом направлении работает. Будет ему очень полезна.
вопрос немного не по теме: с помощью каких инструментов проще всего создавать покадровую анимацию(изображения)?
> Поддерживается всеми современными браузерами. Естественно, не поддерживается IE.
Позже:
> В IE до девятой версии не поддерживается.
На самом деле некоторые функции, которых зачастую достаточно для чего-то простого, поддерживаются даже в ИЕ6 через эмуляцию посредством VML (библиотека гугла, вроде называется IE canvas)
Позже:
> В IE до девятой версии не поддерживается.
На самом деле некоторые функции, которых зачастую достаточно для чего-то простого, поддерживаются даже в ИЕ6 через эмуляцию посредством VML (библиотека гугла, вроде называется IE canvas)
п. 16 Все попытки сделать его поддерживаемыми можно назвать подходящими только для очень узкого круга задач и не дают вменяемой скорости.
=) либа называется excanvas. Есть ещё либы на flash и activeX. Но они подходят только для совсем лёгких задач, имхо.
=) либа называется excanvas. Есть ещё либы на flash и activeX. Но они подходят только для совсем лёгких задач, имхо.
На самом деле тормоза будут только при каких то анимациях. А если просто отрисовать например график, то в том же ИЕ8 работает сносно, даже с какими-то несложными динамическими изменениями шкал. Так или иначе, суть моего коммента, что у вас написаны были взаимоисключающие параграфы. Я не призываю всех яростно использовать либы, просто констатировал факт.
Столько танцев с бубном вокруг тривиальных задач. Это мазохизм какой-то. По крайне мере с точки зрения флэшера. CSS для движения фона… Наложения канвасов один на другой для слоев… Полная перерисовка при анимации, буферизация отдельных объектов и частичная перерисовка. Да еще в разных браузерах по разному.
но в итоге canvas куда более естесственен для браузера, чем внешний модуль флэша
Вы лукавите. Я, конечно, в Flash не эксперт, но как на счёт проблем с производительностью при большом количестве объектов без использования cacheAsBitmap? При этом он тоже не совсем идеален. Есть ещё всякие костыли типа интересного векторного HUE и тд)
Да, возможно в Canvas есть свои заморочки, но не утверждайте, что Flash — идеален)
И да при помощи LibCanvas половина того, что вы описали вообще абстрагируется в прозрачный интерфейс.
Перерисовка тоже хитрая, буферизация — облегчённая. Браузеры — абстрагированы и все приведены к одному виду.
А вам не всё-равно ли — там css или что-то ещё?
Да, возможно в Canvas есть свои заморочки, но не утверждайте, что Flash — идеален)
И да при помощи LibCanvas половина того, что вы описали вообще абстрагируется в прозрачный интерфейс.
// создание слоёв
var layer = libcanvas.createLayer('units');
// сдвиг слоя
layer.shift(100, 100)
Перерисовка тоже хитрая, буферизация — облегчённая. Браузеры — абстрагированы и все приведены к одному виду.
А вам не всё-равно ли — там css или что-то ещё?
UFO just landed and posted this here
14. Редакторы — в чём писать?
Visual Studio + Script#. Очень удобно на самом деле, кто недолюбливает JavaScript.
Sign up to leave a comment.
Canvas F.A.Q