Кодинг
★ Рубрика: Кодинг
★ Тема: Javascript, SVG

SVG-часы для сайта

Использование JavaScript в сочетании с векторной графикой позволяет получать очень интересные решения. Здесь приведен пример SVG-анимации в виде аналоговых часов. Преимущество векторной графики над растровой в ее масштабируемости.
При увеличении изображения его качестве не меняется. Это очень удобно, если шаблон вашего сайта адаптируемый. Посмотрите пример слева. Эти часы реализованы на основе svg-графики. Скрипт используется для вычисления величин углов, на которые надо поворачивать стрелки на основе системного времени. А для отрисовки часов уже используются возможности svg-графики. Так как все изображение это обычный текст, то его легко настроить. Это можно делать даже динамически, используя те же скрипты. Возможности такой графики ограничены только вашей фантазией и навыками программирования. Она не подходит только для создания очень детализованных изображений. Для тех, кто не знает что такое svg-графика, приведем цитату из Википедии.
SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику — или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C — организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года. В 2001 году вышла версия 1.0, в 2011 - версия 1.1, которая остается актуальной до сегодняшнего дня. В настоящее время в активной разработке находится версия 2.
Дальше приведем код этих часов:
 Похожие публикации: Javascript, SVG

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]