Posts Tagged ‘Тег CANVAS’

Тег CANVAS: рисование на веб-странице (ч.1)

Воскресенье, Май 6th, 2012 Нет комментариев

Under : , , , , , ,

Продолжаем знакомство с возможностями новой версии языка HTML под номером 5, поддерживаемой Internet Explorer  9 и другими современными веб-браузерами. На этот раз мы поговорим о новых графических возможностях HTML 5. Они включают тег <CANVAS> и средства для программного рисования прямо на веб-странице. Мы, как веб-дизайнеры, давно об этом мечтали…

1. Прошлое и настоящее веб-графики
Начнём с того, что совершим небольшой экскурс в историю веб-графики, рассмотрим, что нам предлагала предыдущая версия HTML — 4.01, и выясним, что стоит ждать от HTML 5.
(далее…)

Тег CANVAS: рисование на веб-странице (ч.2)

Воскресенье, Май 6th, 2012 Нет комментариев

Under : , , , , ,

Продолжаем рассматривать канву HTML 5 — средство для программного рисования прямо на веб-странице.

8. Рисование сложных фигур
Но чтобы нарисовать более-менее сложную картинку, одних только прямоугольников недостаточно. Поэтому канва предоставляет нам средства для рисования сложных фигур, контур которых состоит из произвольного количества сегментов — прямых и кривых линий, соединённых друг с другом. Сейчас мы узнаем, как пользоваться этими средствами. (далее…)

Тег CANVAS: рисование на веб-странице (ч.3)

Воскресенье, Май 6th, 2012 Нет комментариев

Under : , , , , , ,

В третьей части статьи о канве HTML 5 мы расскажем о том, как осуществлять заливку канвы сплошным и градиентным цветами.

9. Задание цвета линий контура и заливок
Было бы странно, если бы канва не предоставляла средств для указания цвета линий и заливок. Разумеется, она позволяет это сделать! Причём поддерживаются как сплошные, так и градиентные цвета. А ещё мы можем использовать в качестве цвета любое графическое изображение!
(далее…)

Тег CANVAS: рисование на веб-странице (ч.4)

Воскресенье, Май 6th, 2012 Нет комментариев

Under : , , , ,

10. Задание толщины и других параметров линий контура
По умолчанию все контуры рисуются линиями толщиной в 1 пиксел. Однако мы можем указать для них другую толщину, а также задать другие их параметры.

Для задания толщины линий контуров используется свойство lineWidth объекта CanvasRenderingContext2D. Значение толщины должно быть указано в виде числа в пикселах.
(далее…)

Тег CANVAS: рисование на веб-странице (ч.5)

Воскресенье, Май 6th, 2012 Нет комментариев

Under : , , , , ,

14. Преобразования системы координат
Преобразования - это различные действия, которые мы можем выполнять над системой координат канвы. В число таких преобразований входят смещение точки начала координат, изменение масштаба системы координат и её поворот. Это может пригодиться, если мы собираемся создать фигуру, которую иными средствами нарисовать невозможно или очень сложно.

Отметим, что преобразования затрагивают только систему координат канвы. Уже присутствующая на ней графика останется неизменной. Однако графика, которую мы нарисуем после этого, будет выводиться уже в изменённой системе координат. (далее…)

Тег CANVAS: рисование на веб-странице (ч.6)

Воскресенье, Май 6th, 2012 Нет комментариев

Under : , , , ,

18. Создаём анимацию на канве
К сожалению, канва HTML 5 не предоставляет никаких специальных средств для создания анимации. Нам придётся пользоваться для этого стандартные средства веб-браузера, а именно, метод setInterval объекта Window.

Объект Window представляет окно веб-браузера. Экземпляр этого объекта, представляющий текущее окно веб-браузера, доступен через переменную window, доступную в любом веб-сценарии.

Метод setInterval создаёт таймер, который можно рассматривать как своего рода «будильник», который срабатывает каждый раз, когда пройдет определённый интервал времени. Срабатывание этого «будильника» заключается в вызове указанной нами функции.

Вот формат вызова этого метода: (далее…)