Canvas F.A.Q

[Aler]

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

g = ctx.createLinearGradient(s.x, s.y, f.x, f.y);
g.addColorStop(0, "red");
g.addColorStop(1, "green");

ctx.strokeStyle = g;


[Aler]

где s = startPoint и f = finalPoint

[dom1n1k]

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

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

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

[homm]

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

Возможны.

[Seldon]

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

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

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

[TheShock]

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

[k12th]

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

[kichik]

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

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

[TheShock]

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

[eldarmusin]

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

[joger]

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

[Mew]

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

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

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

[TheShock]

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

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

[Mew]

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

[zallesov]

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

[ckald]

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

[zallesov]

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

[TheShock]

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

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

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

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

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

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

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

[zallesov]

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

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

[TheShock]

Ага. Подключаете Атом после Мутулз и они будут друг-друга дополнять)

[KvanTTT]

14. Редакторы — в чём писать?

Visual Studio + Script#. Очень удобно на самом деле, кто недолюбливает JavaScript.