Прямоугольники

Прямоугольники

Мы уже умеем рисовать прямоугольники, используя описанные ранее методы strokeRect и fillRect. Но прямоугольники, рисуемые этими методами, представ- ляют собой независимые фигуры, не являющиеся частью какого-либо сложного контура. Если мы хотим нарисовать прямоугольник в составе сложного контура, нам придется прибегнуть к методу rect:

<контекст рисования>.rect(<горизонтальная координата>,<вертикальная координата>, <ширина>,<высота>)

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

После рисования прямоугольника методом rect перо устанавливается в точку с координатами [0,0], т. е. в верхний левый угол канвы.

Web-сценарий из листинга 22.5 рисует сложную фигуру, состоящую их трех накладывающихся друг на друга квадратов, и создает для нее заливку.

Листинг 22.5

ctxCanvas.beginPath();

ctxCanvas.rect(50, 50, 50, 50);

ctxCanvas.rect(75, 75, 50, 50);

ctxCanvas.rect(100, 100, 50, 50);

ctxCanvas.fill();