Pull to refresh

Comments 48

Чем больше статей про canvas, тем лучше. Простые статьи, подвигающие таких неспецов, как я «на попробовать» это очень круто.
Я хотел ещё в формате статьи разжевать основы JavaScript'а, но потом решил что это было бы излишним, хотя если надо могу по ходу действия вставлять комментарии к циклам, условиям и т.д.
Мне кажется, перенасыщать информацией тоже не стоит. Само собой, если применяете какую-то особенную js-магию, то пояснять и разжевывать нужно, а для стандартных вещей — нет. И да, комментарии привычнее читать все же в коде (но это так, брюзжание) :)
Вы постепенно пишите. Маленькими, но непрекращающимися шажками получится отличный цикл статей, если не надоест.
Так и делаю. Благо есть опыт ведения блогов, и мысль о том что один пост можно писать в несколько присестов перед тем как его выкинуть в сеть меня не смущает
Картиночки бы :) Хотя может быть Вы так и задумывали — хочешь картинку, изволь скопировать и попробовать?
Да, в точку. С картинками мало бы кто попробовал хотя б обвести код или на него глянуть, просто посмотрев результаты. А тут вот так стимулирую народ. На последний пример хотел скрин вставить, но решил обойтись ссылкой на дропбокс
Очень хотелось бы увидеть реализацию чего-то «3D», вроде вращения объектов вокруг оси, с пояснением математики этого дела :)
3д возможно, но пока 2д и только 2д
Вы знаете, в свое время читал вашу статью, но так и не смог все осилить. Все эти нормали для меня — темный лес :) Все-таки для таких тугодумов, как я, надо проще и подробнее.
В коде очень много переменных с непонятными названиями, некоторые из них можно было бы назвать согласно их сути.
меня вот тоже заинтриговала цифра 2 в вызове var ctx = example.getContext('2d'); :))

а математика вращений пояснена чуть более чем дофига везде.
Будьте добры, поделитесь одной хорошей ссылкой для таких, как я (хотя, может, я и в единственном числе такой).
Я думаю тебе будет интересен вот этот пример. Там правда код без комментариев, но сделано достаточно просто
Да уж, вам просто, а код не так уж прост :)
ох щи их тайлы оч сильно напоминают графику из вольфинштейна 3д
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
Черт побери, реально отличная статья! Спасибо)
в стародавние времена, когда не было ни гугла, ни википедии, и почти не было интернетов,
источником знаний по алгоритмама компьютерной графики была usenet конфа comp.graphics.algorithms
ответы на все нубовские вопросы оттуда собраны в вики www.cgafaq.info/

Спасибо. Информации много, буду потихоньку разбираться.
Спасибо. Продолжайте цикл статей. Хотелось бы увидеть пример создания мини-игрушки, хотя бы тех же Танчиков.
Всё будет, не всё сразу ) Было бы время. Пример игрушки рабочей появится только после того как все основы протопчем.
Есть идея: если будете продолжать статьи писать такие обучающие, то давайте в конце небольшое, но интересное задание для самостоятельного выполнения, как «домашку».
Да клёвая идея. Сейчас подкорректирую немного пост и допишу «домашку», благо она сама там напрашивается. А кстати такой метод ведения постов (с заданиями) недавно видел у художника Антона Карлова
А ведь есть же для браузеров что-то вроде openGL, где часть математического аппарата по прорисовке скрыта?
Есть WebGL который сейчас активно выпиливается для отображения 3д графики в браузерах. Я до него ещё не доходил в силу таинственной привязанности к 2д картинке
Ну я так, на будущее.
На хабре пошли статьи про OpenGL, про Canvas, стало интересно =)
В будущих статьях, после основ, не планируете про него писать?
Да я вообще особо не планировал. Просто хотелось написать пост разжевывающий основы, но вот всё то что хотелось написать в один не вместилось, да и у людей столько интереса что грех не продолжить. Пока в планах 3д явно нету, но если интерес и дальше не утухнет, и я доделаю то что запланировал, то и до него доберусь. В январе не обещаю особой активности ибо с понедельника сессия, а я даже не знаю какие предметы будут)
А можно такой вопрос: если я хочу, чтобы, скажем, верхняя кривая была одного цвета, а нижняя — другого, то мне придется вызывать после отрисовки кривой stroke(), а затем beginPath() для рисования нижней кривой? Спасибо.
Да, я так делаю
    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();
Благодарю. Конечно, не очень удобно, на мой взгляд, с другой стороны, как я понял в результате эксперимента, позволяет одномоментно изменить цвет линий внутри begin...endPath()
на самом деле всё правильно и логично, stroke() обрисовывает всё то что было после beginPath() и если добавить ещё один stroke(), то он последний обрисует все действия предыдущего + те которые после него шли. Т.е. некоторые линии нарисуются дважды и если менялся цвет то произойдет своеобразное наложение доминирующим цветом где будет последний примененный.
endPath на моей памяти вообще не существует, а closePath не обязателен к применению ))
Простите, ошибся, closePath, конечно :) Спасибо за пояснение, теперь все стало ясно.
Дело хозяйское, но обычно статьи про Canvas бросают в блог JavaScript ;)
Ну я делаю акцент на канвас апи, а не на замысловатые алгоритмы. Поэтому тут я думаю уместней, тем более что никто прежде ничего не писал
Ну, тогда с открытием!
Все-таки, думаю, Canvas заслуживает отдельного блога, пусть он и называется HTML5 =)
Один недостаток — люди, которые следят за блогом Javascript не получат этой статьи.
Привыкнут. Я его сначала вообще в вэбдев кинул. Да и в дж.с. пост бы быстро утонул в море записей о джКвэри и прочих хитростей программирования на этом замечательном языке))
Интересно, а вот как со всеми этими штуками строить процесс взаимодействия дизайнера и технолога? То есть с обычным растром все просто: нарисовали в фотошопе, обговорили, нарезали, отдали. А тут допустим вот я придумал картинку и, например, анимацию, даже нарисовал что-то в иллюстраторе (вектор все-таки), как мне потом отдать это разработке? Не по координатам же диктовать где какая дуга преломляется? Может есть какой-то инструментарий?

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


UFO just landed and posted this here
и жаль, что производительность оставляет желать много лучшего
Only those users with full accounts are able to leave comments. Log in, please.