Предыдущий ролик Следующий ролик  

Видео урок: Реальный пример: Raphael JavaScript Library

HTML5: графика и анимация с Canvas

Итак, canvas имеет гораздо больший потенциал, что просто создание графических эффектов. Это библиотека Raphael JavaScript. Она используется для создания графиков. Она может создавать графики и диаграммы при помощи canvas и технологией, называемой SVG, но эту технологию мы не будем обсуждать здесь. Давайте посмотрим, как все работает. Смотрите, я просто перехожу в раздел Demo. Здесь есть все примеры того, что вы можете сделать при помощи Rafael Drawing Library. Давайте посмотрим на этот. Это пример графика, который показывает данные конкретного месяца.

Вы видите, если я переключаюсь между месяцами, график меняется, представляя разные наборы данных, и вы видите, что здесь есть небольшая анимация. Давайте вернемся сюда. Вот действительно классный пример, который называется Polar Clock, в нем также присутствует canvas, чтобы нарисовать часы, используя окружности. Вы видите, что каждое из этих колец отмечено цветом, и цветные кольца соответствуют вот этому тексту. Синее кольцо - это часы, серое - это минуты. Вы видите здесь и секундную стрелку. Далее, дата показана в двух внутренних кругах в разных оттенках зеленого.

Итак, сейчас 26 апреля, и вы видите, что эти часы - просто интересный способ использования canvas, чтобы нарисовать что-то, что мы используем каждый день, как, например, часы на стене. Давайте рассмотрим еще один пример. Это пример использования canvas, чтобы вращать предварительно нарисованное изображение. Это обычный рисунок JPEG, который прорисован в canvas, а используя эти элементы управления, я могу их вращать. Вы также можете увидеть здесь анимацию. Все начинается медленно, затем ускоряется, а затем снова замедляется.

Раньше для создания всего этого были нужны плагины, а теперь это просто canvas в HTML5.