Для того чтобы подготовить элемент <canvas> к работе, в первую очередь необходимо вызвать метод getContext(). Этот метод генерирует контекст рисования, который будет связан с указанным холстом. Мы будем использовать ссылку на получившийся контекст рисования, работая с остальными возможностями API холста.
Листинг 7.2. Создание контекста рисования для холста
Function initiate(){
Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);
}
Window. addEventListener("load", initiate, false);
В листинге 7.2 мы сохранили ссылку на элемент <canvas> в переменной elem, а затем создали контекст рисования, вызвав метод getContext(‘2d’). Этот метод принимает одно из двух значений, 2d или 3d, описывающих, соответственно, двухмерную и трехмерную среды рисования. Пока что поддерживается только вариант 2d, однако разработка трехмерного API для холста уже идет полным ходом.
Скопируйте код HTML-документа из листинга 7.1 в новый пустой файл. Также понадобится создать файл с именем canvas. js — в нем вы будете сохранять примеры кода, начиная с листинга 7.2. Все фрагменты кода, представленные в этой главе, независимы друг от друга; каждый последующий нужно будет копировать на место предыдущего.
Когда переменная объявляется внутри функции без ключевого слова var, она становится глобальной. Это означает, что обратиться к ней можно из любого места в коде, включая другие функции. В примере кода из листинга 7.2 мы объявили глобальную переменную canvas, для того чтобы всегда иметь возможность обращаться к контексту холста.
Контекст рисования холста представляет собой сетку пикселов, выстроенных в строки (слева направо) и столбцы (сверху вниз), с точкой отсчета (пикселом с координатами (0, 0)) в верхнем левом углу прямоугольника.
Добавить комментарий