Графика в HTML5

Основные концепции web-графики

Основные концепции web-графики.

Изображение — это прямоугольник из пикселей разных цветов. Цвета идеи тифицируются по их позиции в палитре, в свою очередь палитра — это мае сив цветов. Каждая запись в палитре имеет три разных цветовых составляющих — одна для красного, одна для зеленого и одна для синего. Насыщенность каждого из цвета варьируется от 0 (цвет отсутствует) до 255 (полная насыщенность). Читать далее

Начинаем рисовать

Теперь попробуем осуществить давнюю мечту — изобразить на веб-странице наклонную линию (раньше для этого нужно было применять Flash или, прости Господи, ActiveX). Тут нам потребуется по-настоящему рисовать:

Читать далее

Наконец-то 3D

По задумке художника, который пытается во мне проснуться, это будет основание для некой фигуры, и, как и положено основанию, оно должно лежать на полу (сейчас фигура стоит на ребре). Читать далее

Работа с изображениями

Наклонные линии, симпатичные рожи и сердечки — это, конечно, хорошо, но работа с графикой никогда не стала бы полноценной без возможности импорта готовых изображений. Естественно, такая возможность в canvasAPI присутствует, и сейчас мы научимся ее использовать.

Читать далее

SMIL — язык анимации SVG

Анимация в SVG осуществляется средствами языка SMIL. Это язык разметки, рекомендованный W3C для описания мультимедийных презентаций. И тут все гораздо интереснее, чем, допустим, в Canvas или в WebGL (где анимация — покадровая), хотя подход довольно необычный: в SVG каждой отдельной геометрической фигуре можно присвоить свои анимационные инструкции, заставить двигаться. Как и SVG, SMIL является простым подмножеством XML.

Читать далее

За каждый пиксель!

Ну хватит мучить кошек. Но, не отходя далеко от операций с готовыми изображениями, стоит рассмотреть, как canvas может работать с рисунком попиксельно. За это отвечают два метода — getImageData() и putImageData(). Сначала посмотрим, как они работают на практике. Следующим кодом мы обесцветим цветную фотографию (рис. 46):

Читать далее

Библиотеки для работы с SVG

Естественно, создавать реальные, сложные приложения с использованием SVG — значит обрекать себя на написание большого количества повторяющегося, однообразного и рутинного кода. Читать далее

Трансформации

Мы уже применяли в силу необходимости метод translate(), теперь давайте разберемся с некоторыми трансформациями изображений подробнее.

Упомянутый метод просто сдвигает пространство рисования на заданное значение по двум координатам:

Читать далее

Canvas vs SVG

Итак, вопрос, который по определению провокационный и флеймообразующий: что использовать — canvas или SVG, — на первый взгляд, он не очень правомерен: SVG — это векторная графика, Canvas представляет растовые изображения. Но тем не менее области применения обеих технологий на веб-страницах сильно пересекаются. Читать далее