CANVAS шаг за шагом: Основы

[vnmukhin]

Чем больше статей про canvas, тем лучше. Простые статьи, подвигающие таких неспецов, как я «на попробовать» это очень круто.

[shpaker]

Я хотел ещё в формате статьи разжевать основы JavaScript'а, но потом решил что это было бы излишним, хотя если надо могу по ходу действия вставлять комментарии к циклам, условиям и т.д.

[vnmukhin]

Мне кажется, перенасыщать информацией тоже не стоит. Само собой, если применяете какую-то особенную js-магию, то пояснять и разжевывать нужно, а для стандартных вещей — нет. И да, комментарии привычнее читать все же в коде (но это так, брюзжание) :)

[freeozone]

Вы постепенно пишите. Маленькими, но непрекращающимися шажками получится отличный цикл статей, если не надоест.

[shpaker]

Так и делаю. Благо есть опыт ведения блогов, и мысль о том что один пост можно писать в несколько присестов перед тем как его выкинуть в сеть меня не смущает

[GoodwinNK]

Картиночки бы :) Хотя может быть Вы так и задумывали — хочешь картинку, изволь скопировать и попробовать?

[shpaker]

Да, в точку. С картинками мало бы кто попробовал хотя б обвести код или на него глянуть, просто посмотрев результаты. А тут вот так стимулирую народ. На последний пример хотел скрин вставить, но решил обойтись ссылкой на дропбокс

[guyfawkes]

Очень хотелось бы увидеть реализацию чего-то «3D», вроде вращения объектов вокруг оси, с пояснением математики этого дела :)

[shpaker]

3д возможно, но пока 2д и только 2д

[initbit]

Пожалуйте babarun.ru/content/canvas/, а пояснения в коде в виде комментариев.

[guyfawkes]

Вы знаете, в свое время читал вашу статью, но так и не смог все осилить. Все эти нормали для меня — темный лес :) Все-таки для таких тугодумов, как я, надо проще и подробнее.

[initbit]

Тогда для начала очень рекомендую Вот эту литературу

[Aliance]

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

[qmax]

меня вот тоже заинтриговала цифра 2 в вызове var ctx = example.getContext('2d'); :))

а математика вращений пояснена чуть более чем дофига везде.

[guyfawkes]

Будьте добры, поделитесь одной хорошей ссылкой для таких, как я (хотя, может, я и в единственном числе такой).

[shpaker]

Я думаю тебе будет интересен вот этот пример. Там правда код без комментариев, но сделано достаточно просто

[guyfawkes]

Благодарю.

[guyfawkes]

Да уж, вам просто, а код не так уж прост :)

[TheShock]

Не та ссылка):
dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

[shpaker]

ох щи их тайлы оч сильно напоминают графику из вольфинштейна 3д

[TheShock]

I wanted to implement for some time was a psuedo-3D engine such as the one used in the old Wolfenstein 3D game by iD Software

[guyfawkes]

Черт побери, реально отличная статья! Спасибо)

[TheShock]

You are welcome =)

[qmax]

в стародавние времена, когда не было ни гугла, ни википедии, и почти не было интернетов,
источником знаний по алгоритмама компьютерной графики была usenet конфа comp.graphics.algorithms
ответы на все нубовские вопросы оттуда собраны в вики www.cgafaq.info/

[guyfawkes]

Спасибо. Информации много, буду потихоньку разбираться.

[fls_welvet]

Спасибо. Продолжайте цикл статей. Хотелось бы увидеть пример создания мини-игрушки, хотя бы тех же Танчиков.

[shpaker]

Всё будет, не всё сразу ) Было бы время. Пример игрушки рабочей появится только после того как все основы протопчем.

[freeozone]

Есть идея: если будете продолжать статьи писать такие обучающие, то давайте в конце небольшое, но интересное задание для самостоятельного выполнения, как «домашку».

[shpaker]

Да клёвая идея. Сейчас подкорректирую немного пост и допишу «домашку», благо она сама там напрашивается. А кстати такой метод ведения постов (с заданиями) недавно видел у художника Антона Карлова

[kirsan_vlz]

А ведь есть же для браузеров что-то вроде openGL, где часть математического аппарата по прорисовке скрыта?

[shpaker]

Есть WebGL который сейчас активно выпиливается для отображения 3д графики в браузерах. Я до него ещё не доходил в силу таинственной привязанности к 2д картинке

[kirsan_vlz]

Ну я так, на будущее.
На хабре пошли статьи про OpenGL, про Canvas, стало интересно =)
В будущих статьях, после основ, не планируете про него писать?

[shpaker]

Да я вообще особо не планировал. Просто хотелось написать пост разжевывающий основы, но вот всё то что хотелось написать в один не вместилось, да и у людей столько интереса что грех не продолжить. Пока в планах 3д явно нету, но если интерес и дальше не утухнет, и я доделаю то что запланировал, то и до него доберусь. В январе не обещаю особой активности ибо с понедельника сессия, а я даже не знаю какие предметы будут)

[guyfawkes]

А можно такой вопрос: если я хочу, чтобы, скажем, верхняя кривая была одного цвета, а нижняя — другого, то мне придется вызывать после отрисовки кривой stroke(), а затем beginPath() для рисования нижней кривой? Спасибо.

[shpaker]

Да, я так делаю

    ctx.strokeStyle = '#f00';
    ctx.beginPath();
    ctx.moveTo(10, 15);
    ctx.bezierCurveTo(75, 55, 175, 20, 250, 15);
    ctx.stroke();
    ctx.strokeStyle = '#0f0';
    ctx.beginPath();
    ctx.moveTo(10, 15);
    ctx.quadraticCurveTo(100, 100, 250, 15);
    ctx.stroke();

[guyfawkes]

Благодарю. Конечно, не очень удобно, на мой взгляд, с другой стороны, как я понял в результате эксперимента, позволяет одномоментно изменить цвет линий внутри begin...endPath()

[shpaker]

на самом деле всё правильно и логично, stroke() обрисовывает всё то что было после beginPath() и если добавить ещё один stroke(), то он последний обрисует все действия предыдущего + те которые после него шли. Т.е. некоторые линии нарисуются дважды и если менялся цвет то произойдет своеобразное наложение доминирующим цветом где будет последний примененный.
endPath на моей памяти вообще не существует, а closePath не обязателен к применению ))

[guyfawkes]

Простите, ошибся, closePath, конечно :) Спасибо за пояснение, теперь все стало ясно.

[shpaker]

перенёс в блог html5

[Nutochka]

Дело хозяйское, но обычно статьи про Canvas бросают в блог JavaScript ;)

[shpaker]

Ну я делаю акцент на канвас апи, а не на замысловатые алгоритмы. Поэтому тут я думаю уместней, тем более что никто прежде ничего не писал

[Nutochka]

Ну, тогда с открытием!
Все-таки, думаю, Canvas заслуживает отдельного блога, пусть он и называется HTML5 =)
Один недостаток — люди, которые следят за блогом Javascript не получат этой статьи.

[shpaker]

Привыкнут. Я его сначала вообще в вэбдев кинул. Да и в дж.с. пост бы быстро утонул в море записей о джКвэри и прочих хитростей программирования на этом замечательном языке))

[TheShock]

habrahabr.ru/blogs/canvas/

[Xumepa]

Интересно, а вот как со всеми этими штуками строить процесс взаимодействия дизайнера и технолога? То есть с обычным растром все просто: нарисовали в фотошопе, обговорили, нарезали, отдали. А тут допустим вот я придумал картинку и, например, анимацию, даже нарисовал что-то в иллюстраторе (вектор все-таки), как мне потом отдать это разработке? Не по координатам же диктовать где какая дуга преломляется? Может есть какой-то инструментарий?

За статью спасибо, буду ждать продолжения.

[Nutochka]

Ну, в Canvas обычно используется набор спрайтов. То есть ключевые кадры уже отрендерены.
Да, не так, как в Flash, но тут просто свой подход. =) Вот пример с «Asteroids» на LibCanvas:

[HomoLuden]

и жаль, что производительность оставляет желать много лучшего