Теперь с имеющимся арсенальном средств мы вроде бы можем нарисовать буквально все! Даже трудно представить, что нам теперь недоступно. Вот только… сложно это все. Читать далее
Теперь с имеющимся арсенальном средств мы вроде бы можем нарисовать буквально все! Даже трудно представить, что нам теперь недоступно. Вот только… сложно это все. Читать далее
Теперь попробуем совместить интерактивность и анимацию. Напишем небольшую, но бодрящую игру (с мячиком!), дабы пояснить основные приемы создания canvas-игрушек.
Все здорово, но без возможности динамически менять содержимое и взаимодействовать с пользователем все эти графические возможности существенно теряют значимость. Читать далее
Мы уже применяли в силу необходимости метод translate(), теперь давайте разберемся с некоторыми трансформациями изображений подробнее.
Упомянутый метод просто сдвигает пространство рисования на заданное значение по двум координатам:
Ну хватит мучить кошек. Но, не отходя далеко от операций с готовыми изображениями, стоит рассмотреть, как canvas может работать с рисунком попиксельно. За это отвечают два метода — getImageData() и putImageData(). Сначала посмотрим, как они работают на практике. Следующим кодом мы обесцветим цветную фотографию (рис. 46):
Наклонные линии, симпатичные рожи и сердечки — это, конечно, хорошо, но работа с графикой никогда не стала бы полноценной без возможности импорта готовых изображений. Естественно, такая возможность в canvasAPI присутствует, и сейчас мы научимся ее использовать.
Теперь попробуем осуществить давнюю мечту — изобразить на веб-странице наклонную линию (раньше для этого нужно было применять Flash или, прости Господи, ActiveX). Тут нам потребуется по-настоящему рисовать:
Вот такой короткий заголовок, и тем не менее в нем я ухитрился соврать. В canvas API нет примитивов. Есть примитив. Один. И мы его уже рассмотрели во вступительном примере. Читать далее
Важно понимать: сам элемент canvas является ч астью DOM HTML-документа, но все, что в него загружается, — линии, фигуры, надписи — про DOM ничего не знает. И у них это взаимно.
Это, наверное, самое известное новшество языка. Бывает иногда даже некоторая подмена понятий, и, говоря о HTML5, часто подразумевают работу именно с canvas. Читать далее