Рисование прямоугольников

Чаще всего разработчикам приходится сначала готовить фигуры, которые они хотели бы поместить на холст, а затем отправлять их в контекст (мы скоро рассмотрим соответствующие процессы), однако существует несколько методов, позволяющих рисовать прямо на холсте, минуя подготовительный этап. Эти методы ограничиваются прямоугольной формой и генерируют на экране примитивную фигуру (для получения других фигур придется научиться комбинировать различные техники рисования и сложные пути). Далее перечислены доступные простейшие методы:

— fillRect(x, y, width, height). Предназначен для рисования прямоугольника, залитого цветом. Верхний левый угол фигуры будет находиться в точке, заданной атрибутами x и y. Атрибуты width и height определяют размер прямоугольника;

— strokeRect(x, y, width, height). Аналогичен предыдущему, но создает на холсте пустой прямоугольник, то есть прямоугольный контур;

— clearRect(x, y, width, height). Предназначен для вычитания пикселов из области, определяемой его атрибутами. Другими словами, это прямоугольный ластик.

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

Листинг 7.3. Рисование прямоугольников

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);

Canvas. strokeRect(100,100,120,120); canvas. fillRect(110,110,100,100); canvas. clearRect(120,120,80,80);

}

Window. addEventListener("load", initiate, false);

Первый метод, strokeRect(100, 100, 120, 120), создает на холсте пустой прямоугольный контур с левым верхним углом в точке (100, 100) и стороной размером 120 пикселов (фактически это квадрат со стороной 120 пикселов). Второй метод, fillRect(110, 110, 100, 100), создает прямоугольник, заполненный цветом, и на этот раз рисование начинается в точке холста (110, 110). Наконец, последний метод, clearRect(120, 120, 80, 80), очищает квадратную область со стороной 80 пикселов в центре предыдущего прямоугольника.

На рис. 7.1 представлено всего лишь схематическое изображение того, что вы увидите после исполнения кода из листинга 7.3. Элемент <canvas> визуализируется как сетка с точкой отсчета в левом верхнем углу страницы и габаритами, определяемыми его атрибутами. Прямоугольники выводятся на холсте в точках, заданных атрибутами x и y, один поверх другого в том порядке, как они перечислены в коде (прямоугольник, описанный первым, будет нарисован первым, второй — поверх первого и т. д.). Существует метод, позволяющий настраивать способ рисования фигур, но о нем мы поговорим позже.