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

Видео урок: Использование рисующего контекста Canvas

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

Чтобы рисовать в canvas, нам нужно использовать рисующий 2D API canvas, а чтобы сделать это, давайте посмотрим, как все работает. Рисование в canvas требует определенного набора шагов. На первом этапе нам нужно получить ссылку на canvas; другими словами, нам нужно получить элемент canvas со страницы. Как только мы получили ссылку на элемент canvas, мы забираем его контекст, используя метод getContext(), о котором мы говорили немного ранее. Если возвращаемое значение getContext() не является null, тогда у вас появляется API, и вы можете его использовать.

Чтобы сделать это в скрипте, давайте представим, что у нас есть следующий пример. У нас определен тег canvas. Все это время мы таким же способом определяли тег canvas. У нас есть ID, width, height и немного резервного контекста. Вот как все происходит при рисовании в скрипте. Обычно вы будете определять функцию. Вы вызываете getElementById, чтобы получить элемент canvas. Как только у вас есть canvas, вы запрашиваете его контекст. Здесь мы говорим canvas element.getContext и передаем 2D, потому что нам нужен рисующий 2D API. И если результат не null, тогда мы можем начать рисовать, а затем вы закрываете функцию и выходите.

Итак, рисующий API canvas в 2D довольно комплексный. Он разделен на три группы. Первая группа работает с формами. Это прямоугольники, линии, дуги, контуры, цвета и стили. Есть различные виды кривых, а также текст. Следующая группа работает с тем, как все рисуется. Есть разные свойства композитинга, которые мы можем использовать, паттерны и градиенты. Вы можете создавать тени. Мы также можем работать с функцией clipping paths, и все это мы рассмотрим позже. И есть, наконец, такие вещи, как трансформации, рисунки и видео, и вы даже можете получить доступ к сырым пикселям canvas, чтобы сделать несколько интересных эффектов. В оставшейся части курса мы все это рассмотрим.

Давайте начнем с небольшого легкого примера. Давайте порисуем в canvas, используя 2D API. Вот я снова в редакторе кода, открываю примеры. В данном случае я буду использовать пример contextdraw_start из главы 04, открываю его. Вот наш файл. Вот наш canvas. Вот код, который мы напишем. Я копирую эти строки из ContextDraw. Копируем, возвращаемся в исходный код и вставляем их сюда .

Сейчас мы будем использовать 2D API, чтобы вставить в canvas светло серый задний фон, который мы видели ранее. Теперь, я не ожидаю, что прямо сейчас вы все это поймете. Это простой пример, который показывает, как все работает. Итак, во-первых, мы получаем ссылку на элемент canvas, вызывая getElementById canvas. Затем мы спрашиваем, есть ли у нас объект canvas и есть ли метод getContext? Если он есть, мы вызываем метод getContext, используя 2D в качестве аргумента.

Мы получаем рисующий 2D API. И наконец, если все хорошо в контексте, мы устанавливаем стиль заднего фона на светло серый, а затем мы вызываем функцию fillRect, и fillRect принимает пару аргументов. Это место, с которого будет начинаться рисование, 0,0, а затем ширина и высота прямоугольника, который вы хотите нарисовать, в данном случае ширина и высота canvas. Возможно, вы догадываетесь, что произойдет. Весь canvas будет заполнен светло серым задним фоном. Продолжаем, сохраняем. Все, теперь переходим в браузер.

Я переношу все это в браузер, и вы видите, что происходит. Вот canvas заполнен. Давайте перейдем в другой браузер, чтобы убедиться, что все работает корректно. Открываю все это в Firefox, результат тот же самый. Это довольно простой пример использования рисующего 2D API, чтобы заполнить прямоугольник серым цветом.