Комментарии 48
Чем больше статей про canvas, тем лучше. Простые статьи, подвигающие таких неспецов, как я «на попробовать» это очень круто.
Я хотел ещё в формате статьи разжевать основы JavaScript'а, но потом решил что это было бы излишним, хотя если надо могу по ходу действия вставлять комментарии к циклам, условиям и т.д.
Мне кажется, перенасыщать информацией тоже не стоит. Само собой, если применяете какую-то особенную js-магию, то пояснять и разжевывать нужно, а для стандартных вещей — нет. И да, комментарии привычнее читать все же в коде (но это так, брюзжание) :)
Вы постепенно пишите. Маленькими, но непрекращающимися шажками получится отличный цикл статей, если не надоест.
Картиночки бы :) Хотя может быть Вы так и задумывали — хочешь картинку, изволь скопировать и попробовать?
Очень хотелось бы увидеть реализацию чего-то «3D», вроде вращения объектов вокруг оси, с пояснением математики этого дела :)
3д возможно, но пока 2д и только 2д
Пожалуйте babarun.ru/content/canvas/, а пояснения в коде в виде комментариев.
Вы знаете, в свое время читал вашу статью, но так и не смог все осилить. Все эти нормали для меня — темный лес :) Все-таки для таких тугодумов, как я, надо проще и подробнее.
Тогда для начала очень рекомендую Вот эту литературу
В коде очень много переменных с непонятными названиями, некоторые из них можно было бы назвать согласно их сути.
меня вот тоже заинтриговала цифра 2 в вызове var ctx = example.getContext('2d'); :))
а математика вращений пояснена чуть более чем дофига везде.
а математика вращений пояснена чуть более чем дофига везде.
Будьте добры, поделитесь одной хорошей ссылкой для таких, как я (хотя, может, я и в единственном числе такой).
Я думаю тебе будет интересен вот этот пример. Там правда код без комментариев, но сделано достаточно просто
в стародавние времена, когда не было ни гугла, ни википедии, и почти не было интернетов,
источником знаний по алгоритмама компьютерной графики была usenet конфа comp.graphics.algorithms
ответы на все нубовские вопросы оттуда собраны в вики www.cgafaq.info/
источником знаний по алгоритмама компьютерной графики была usenet конфа comp.graphics.algorithms
ответы на все нубовские вопросы оттуда собраны в вики www.cgafaq.info/
Спасибо. Продолжайте цикл статей. Хотелось бы увидеть пример создания мини-игрушки, хотя бы тех же Танчиков.
Есть идея: если будете продолжать статьи писать такие обучающие, то давайте в конце небольшое, но интересное задание для самостоятельного выполнения, как «домашку».
А ведь есть же для браузеров что-то вроде openGL, где часть математического аппарата по прорисовке скрыта?
Есть WebGL который сейчас активно выпиливается для отображения 3д графики в браузерах. Я до него ещё не доходил в силу таинственной привязанности к 2д картинке
Ну я так, на будущее.
На хабре пошли статьи про OpenGL, про Canvas, стало интересно =)
В будущих статьях, после основ, не планируете про него писать?
На хабре пошли статьи про 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 не обязателен к применению ))
endPath на моей памяти вообще не существует, а closePath не обязателен к применению ))
перенёс в блог html5
Дело хозяйское, но обычно статьи про Canvas бросают в блог JavaScript ;)
Ну я делаю акцент на канвас апи, а не на замысловатые алгоритмы. Поэтому тут я думаю уместней, тем более что никто прежде ничего не писал
Ну, тогда с открытием!
Все-таки, думаю, Canvas заслуживает отдельного блога, пусть он и называется HTML5 =)
Один недостаток — люди, которые следят за блогом Javascript не получат этой статьи.
Все-таки, думаю, Canvas заслуживает отдельного блога, пусть он и называется HTML5 =)
Один недостаток — люди, которые следят за блогом Javascript не получат этой статьи.
Интересно, а вот как со всеми этими штуками строить процесс взаимодействия дизайнера и технолога? То есть с обычным растром все просто: нарисовали в фотошопе, обговорили, нарезали, отдали. А тут допустим вот я придумал картинку и, например, анимацию, даже нарисовал что-то в иллюстраторе (вектор все-таки), как мне потом отдать это разработке? Не по координатам же диктовать где какая дуга преломляется? Может есть какой-то инструментарий?
За статью спасибо, буду ждать продолжения.
За статью спасибо, буду ждать продолжения.
Ну, в Canvas обычно используется набор спрайтов. То есть ключевые кадры уже отрендерены.
Да, не так, как в Flash, но тут просто свой подход. =) Вот пример с «Asteroids» на LibCanvas:
Да, не так, как в Flash, но тут просто свой подход. =) Вот пример с «Asteroids» на LibCanvas:
НЛО прилетело и опубликовало эту надпись здесь
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
CANVAS шаг за шагом: Основы