canvas = document.getElementById("canvas").
Получаем контекст рисования
Теперь нужно получить контекст рисования для элемента
canvas. Контекст рисования — это JavaScript-объект, обла-
дающий методами и свойствами, при помощи которых
можно рисовать на «холсте». Чтобы получить этот объект,
мы вызываем для canvas метод getContext, передавая
ему строку "2d", — это означает, что мы собираемся фор-
мировать на «холсте» двухмерное изображение. Сохраним
контекст в переменной ctx с помощью команды var ctx
= canvas.getContext("2d").
194 Часть III. Графика
Рисуем квадрат
И наконец, в последней строке мы рисуем на «холсте» равносторонний
прямоугольник (то есть квадрат), вызывая метод контекста рисования
fi llRect, который принимает четыре аргумента: это, в порядке очеред-
Rect —
ности, x- и y-координаты верхнего левого угла квадрата (0, 0), а также его
rectangle —
ширина и высота (10, 10). В данном случае мы просим JavaScript нари-
прямо-
угольник
совать прямоугольник 10 × 10 пикселей в координатах (0, 0) — то есть
в верхнем левом углу «холста».
Запустив этот код, вы должны увидеть на экране черный квадратик,
как на рис. 13.1.
Рис. 13.1. Наш первый рисунок на «холсте»
Рисуем несколько квадратов
Теперь попробуем кое-что поинтереснее. Вместо рисования единственного
квадратика изобразим в цикле множество квадратов, расположенных по диа-
гонали. Замените код между тегами