Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Прямоугольники
Прямоугольники
Мы уже умеем рисовать прямоугольники, используя описанные ранее методы 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();
Оглавление книги
