Изображение — это прямоугольник из пикселей разных цветов. Цвета идеи тифицируются по их позиции в палитре, в свою очередь палитра — это мае сив цветов. Каждая запись в палитре имеет три разных цветовых составляющих — одна для красного, одна для зеленого и одна для синего. Насыщенность каждого из цвета варьируется от 0 (цвет отсутствует) до 255 (полная насыщенность). Читать далее
Теперь попробуем осуществить давнюю мечту — изобразить на веб-странице наклонную линию (раньше для этого нужно было применять Flash или, прости Господи, ActiveX). Тут нам потребуется по-настоящему рисовать:
Для избавления программиста от мучений, связанных с копированием собственного кода при отображении повторяющихся элементов, существует специальный тег, к которому мы уже обращались, — <use>. Читать далее
По задумке художника, который пытается во мне проснуться, это будет основание для некой фигуры, и, как и положено основанию, оно должно лежать на полу (сейчас фигура стоит на ребре). Читать далее
Наклонные линии, симпатичные рожи и сердечки — это, конечно, хорошо, но работа с графикой никогда не стала бы полноценной без возможности импорта готовых изображений. Естественно, такая возможность в canvasAPI присутствует, и сейчас мы научимся ее использовать.
Анимация в SVG осуществляется средствами языка SMIL. Это язык разметки, рекомендованный W3C для описания мультимедийных презентаций. И тут все гораздо интереснее, чем, допустим, в Canvas или в WebGL (где анимация — покадровая), хотя подход довольно необычный: в SVG каждой отдельной геометрической фигуре можно присвоить свои анимационные инструкции, заставить двигаться. Как и SVG, SMIL является простым подмножеством XML.
Ну хватит мучить кошек. Но, не отходя далеко от операций с готовыми изображениями, стоит рассмотреть, как canvas может работать с рисунком попиксельно. За это отвечают два метода — getImageData() и putImageData(). Сначала посмотрим, как они работают на практике. Следующим кодом мы обесцветим цветную фотографию (рис. 46):
Естественно, создавать реальные, сложные приложения с использованием SVG — значит обрекать себя на написание большого количества повторяющегося, однообразного и рутинного кода. Читать далее
Мы уже применяли в силу необходимости метод translate(), теперь давайте разберемся с некоторыми трансформациями изображений подробнее.
Упомянутый метод просто сдвигает пространство рисования на заданное значение по двум координатам:
Итак, вопрос, который по определению провокационный и флеймообразующий: что использовать — canvas или SVG, — на первый взгляд, он не очень правомерен: SVG — это векторная графика, Canvas представляет растовые изображения. Но тем не менее области применения обеих технологий на веб-страницах сильно пересекаются. Читать далее