Loftschool школа онлайн обучения IT профессиям
Профессии
  • Веб-разработчик
  • Frontend с нуля
  • Frontend разработчик
  • Backend разработчик
  • Full Stack разработчик
  • UX/UI Дизайнер
  • Интернет-маркетолог
  • Android-разработчик
Курсы
            • Веб-тестирование
            • Основы вёрстки
            • Веб для начинающих
            • JavaScript
            • Vue.js
            • React.js
            • Node.js
            • PHP
            • UX/UI-дизайн: базовый
            • UX/UI-дизайн: PRO
            • Основы Python
            • Python: машинное обучение
            • Product Management
            • Контекстная реклама
            • SMM
            • SEO для всех
            • Android: базовый
            • Android: продвинутый

          Сентябрьская распродажа

          до 60%

          СКИДКИ

          До конца акции:
          02
          Дней
          00
          Часов
          00
          Минут
          • Главная
          • Блог
          • Статьи
          • JS&canvas 1/7 - Привет canvas
          Полезный блог
          Роман Спиридонов
          Автор блога Loftschool
          Опубликовано 07.10.2013 18:43

          JS&canvas 1/7 - Привет canvas

          Уже год занимаюсь разработкой клиентской части одного крупного веб приложения. И только сейчас решил отвлечься от серьезных ворочаний древесных структур, таблиц и графиков, и посмотреть в сторону canvas со стороны "just for fun". Появилось желание сделать что-то свое и познать работу с canvas напрямую без посреднических плагинов, а в дальнейшем, возможно, создать своего посредника для более удобного общения с холстом.

          День 1.

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

          С рисованием линий по точкам справляется метод lineTo(x,y). Стоит упомянуть, что все методы по рисованию на холсте доступны не из объекта самого холста, а из его контекста рисования, который сначала нужно получить. Пусть у нас есть на странице есть холст с громким для самого начала идентификатором clock:

          [html][/html]

          чтобы получить контекст рисования в двумерной плоскости, а именно в такой мы будет рисовать, необходимо получить этот элемент в качестве javascript объекта, для этого сделаем следующее:

          [js]clock.getContext('2d');[/js]

          Вы спросите почему мы сразу обращаемся к переменной clock? Дело в том, что одной существенной особенностью атрибута id у html тега является то, что в объекте window автоматически создается переменная с именем равным идентификатору и ссылающаяся на этот объект. Можете проверить это позвав window.clock на странице с примером и вы получите искомый холст, хотя никаких getElementById еще не было вызвано, да еще вообще ничего не было вызвано! А холст уже сохранен в переменной! Поэтому всегда следите за уникальностью ваших идентификаторов на странице и задумывайтесь над их уникальностью, особенно при динамическом создании элементов.

          Итак, помимо того, что мы получили контекст, он нам будет нужен для всех остальных методов, так что давайте его сохраним в переменную ctx, чтобы в дальнейшем уже не звать его при каждой необходимости сделать что-нибудь с нашим холстом:

          [js]var ctx = clock.getContext('2d');[/js]

          Чтобы сильно не переутомлять в первый же день, нарисуем пару линий и на сегодня успокоимся, но чтобы рисовать нужно еще место для этого - зададим нашему холсту размер:

          [js]clock.height = 400;

          clock.width = 400;[/js]

          А когда есть площадь, то можно и порисовать на ней что-нибудь, но опять же, не все так сразу - сначала нужно определить стартовую точку, откуда мы будет рисовать:

          [js]ctx.moveTo(10,20);[/js]

          а дальше уже можно проводить черту:

          [js]ctx.lineTo(100,200);[/js]

          и отобразить ее:

          [js]ctx.stroke();[/js]

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

          Думаю, что на первый раз достаточно. До завтра.

          Код страницы:

          [html]

          День 1 - Привет canvas!

          [/html]

          Поделиться

          Не сиди

          без дела

          учись

          онлайн!

          Содержание

          • Все записи блога
            • Трудоустройство
              • Истории выпускников LoftSchool
              • Полезные советы
            • Полезные ссылки
              • Книги
              • Инструменты
            • Новости школы
              • Команда LoftSchool
              • Информация о курсах
            • Статьи
              • Архив материалов
                • DevNews
                • DevShow
                • Loftnews
                • Loftschool
                • Loftvlog
                • Интервью
                • Видеоуроки
              • © 2012 - 2023 LOFT

                Школа онлайн образования

              • © 2012 - 2023 LOFT

                Школа онлайн образования

                • +7 (800) 600 09 54
                • +7 (812) 339 22 01
                • [email protected]
              • Полезная рассылка

                Подпишись, чтобы быть в курсе наших новостей, акций и скидок.

              • Полезное
                • Карта курсов
                • B2B
                • Работодателям
                • Партнерская программа
                • Вакансии
                • Стать автором
                • Подарочные сертификаты
                • Вебинары
                • Блог
                • FAQ
              • Информация
                • О нас
                • Отзывы
                • Сведения об образовательной организации
                • Правовая информация
                • Способы оплаты
                • Контакты
                Безопасная передача данных