TheShock 23 мая 2011 в 03:59

Canvas F.A.Q

8 мин

67K

Canvas*

+114

Комментарии 22

Aler 23 мая 2011 в 07:44

Существуют ли какие-то секретные библиотеки, умеющие рисовать градиентную раскраску линий. Ну то есть чтобы цвет плавно менялся между узлами вдоль линии, не обязательно прямой. Такая функция есть, например, в OpenGL.

g = ctx.createLinearGradient(s.x, s.y, f.x, f.y);

g.addColorStop(0, "red");

g.addColorStop(1, "green");



ctx.strokeStyle = g;

Aler 23 мая 2011 в 07:45

где s = startPoint и f = finalPoint

dom1n1k 23 мая 2011 в 11:49

Да, этот вариант очевиден (вопрос из топика задан мной), но он работает только для прямых. А вот как быть с кривыми Безье? Да если к тому же градиент имеет более 2 колор-стопов, и они не совпадают с узлами кривой?

Я размышлял, можно ли это накостылить существующим функционалом? Например, разбить кривую на мелкие сегменты и апроксимировать градиент мелкими линейными кусочками. Но как ни крути, это именно костыль, причем грубый:
1. Много громоздкой математики
2. Огромный объем мутного для чтения кода
3. Проблемы со сглаживанием линии
4. Проблемы с корректной отрисовкой концов линии
5. Проблемы с полупрозрачными линиями
6. Из-за пиксельных округлений дроблёная линия может немного искажаться по сравнений с исходной

Ну и т.д. Думаю, полноценно решить этот вопрос можно только попиксельным рисованием, на гораздо долее низком уровне абстракции. Задача нетривиальна.

homm 23 мая 2011 в 08:38

такие оптимизации, которые в SVG невозможны, например отрисовка из кеша

Возможны.

Seldon 23 мая 2011 в 09:56

Ну тут вопрос скорее стоит кто его поддерживает? Для svg есть хорошая библиотека raphael, как то ей пользовался, работает и в ie за счет использования VML.
Говоря о canvas не думаю что кому-то охота мучиться с ie, да и плюшки канвы там работать не будут.

Думаю что конкурент canvas сейчас больше SVG нежели флеш, так как на флеше обычно реализуют довольно сложные игрушки (да и удобней это там делать пока. объективно), нежели простую анимацию.

Автору спасибо за пост, услышать конкретные ответы на насущные темы всегда полезно.

TheShock 23 мая 2011 в 17:17

Работает только в Опере, управлять практически нереально, например я хочу сделать игру «танчики» с видом сверху. Я отрисовываю тело одного танка в буфер плюс башню в буфер и все танки рисуются не как векторные объекты, а как два спрайта. Как это сделать на SVG?

k12th 23 мая 2011 в 09:32

Упомянутая книжка от O'Reilly действительно неплохая. Там рассмотрены почти все базовые вопросы — работа с мышью, спрайтовая анимация, базовая физика (трение и гравитация), реализовано несколько простеньких игр. Есть даже про взаимодействие с video и работа со звуком:)

kichik 23 мая 2011 в 09:46

Canvas — низкоуровневое API для отрисовки графики. Поддерживается всеми современными браузерами. Естественно, не поддерживается IE.

Павел, зачем в первой же строчке откровенная неправда?

TheShock 23 мая 2011 в 16:50

Согласен, некорректно выразился. В ie9 поддерживается Canvas на том же уровне, что и в остальных современных браузерах.

eldarmusin 23 мая 2011 в 10:02

Спасибо за статью. Очень полезная. Как раз у меня стажёр в этом направлении работает. Будет ему очень полезна.

joger 23 мая 2011 в 10:08

вопрос немного не по теме: с помощью каких инструментов проще всего создавать покадровую анимацию(изображения)?

Mew 23 мая 2011 в 11:23

> Поддерживается всеми современными браузерами. Естественно, не поддерживается IE.

Позже:
> В IE до девятой версии не поддерживается.

На самом деле некоторые функции, которых зачастую достаточно для чего-то простого, поддерживаются даже в ИЕ6 через эмуляцию посредством VML (библиотека гугла, вроде называется IE canvas)

TheShock 23 мая 2011 в 16:56

п. 16 Все попытки сделать его поддерживаемыми можно назвать подходящими только для очень узкого круга задач и не дают вменяемой скорости.

=) либа называется excanvas. Есть ещё либы на flash и activeX. Но они подходят только для совсем лёгких задач, имхо.

Mew 23 мая 2011 в 18:23

На самом деле тормоза будут только при каких то анимациях. А если просто отрисовать например график, то в том же ИЕ8 работает сносно, даже с какими-то несложными динамическими изменениями шкал. Так или иначе, суть моего коммента, что у вас написаны были взаимоисключающие параграфы. Я не призываю всех яростно использовать либы, просто констатировал факт.

zallesov 23 мая 2011 в 13:00

Столько танцев с бубном вокруг тривиальных задач. Это мазохизм какой-то. По крайне мере с точки зрения флэшера. CSS для движения фона… Наложения канвасов один на другой для слоев… Полная перерисовка при анимации, буферизация отдельных объектов и частичная перерисовка. Да еще в разных браузерах по разному.

ckald 23 мая 2011 в 14:00

но в итоге canvas куда более естесственен для браузера, чем внешний модуль флэша

zallesov 23 мая 2011 в 15:05

Ходить для человека гораздо более естественно чем ездить на авто.

TheShock 23 мая 2011 в 17:16

Вы лукавите. Я, конечно, в Flash не эксперт, но как на счёт проблем с производительностью при большом количестве объектов без использования cacheAsBitmap? При этом он тоже не совсем идеален. Есть ещё всякие костыли типа интересного векторного HUE и тд)

Да, возможно в Canvas есть свои заморочки, но не утверждайте, что Flash — идеален)

И да при помощи LibCanvas половина того, что вы описали вообще абстрагируется в прозрачный интерфейс.

// создание слоёв
var layer = libcanvas.createLayer('units'); 

// сдвиг слоя
layer.shift(100, 100)

Перерисовка тоже хитрая, буферизация — облегчённая. Браузеры — абстрагированы и все приведены к одному виду.

А вам не всё-равно ли — там css или что-то ещё?

zallesov 23 мая 2011 в 18:27

Да мне то все равно. Это вы же с бубном пляшете. Во флэше о производительности задумываются после 300 объектов на стейдже. а с канвасом после 10. Да и правильное использование cacheasbitmap все решает.

TheShock Ты сделал так чтоб atom с mootools не ругался?