ctxCanvas.stroke();
Web-сценарий из листинга 22.4 рисует прямоугольник со скругленными углами.
Попробуйте сами с ним разобраться.
Прямоугольники
Мы уже умеем рисовать прямоугольники, используя описанные ранее методы 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();
Задание стиля линий
Канва позволяет задать стиль линий, включающий в себя некоторые параметры, которые управляют формой их начальных и конечных точек и точек соединения линий друг с другом. Давайте их рассмотрим.
Свойство lineCap задает форму начальных и конечных точек линий. Его значение может быть одной из следующих строк:
— "butt" — начальная и конечная точки как таковые отсутствуют (значение по умолчанию);
— "round" — начальная и конечная точки имеют вид кружков;
— "square" — начальная и конечная точки имеют вид квадратиков.
Web-сценарий из листинга 22.6 рисует толстую прямую линию, начальная и конечная точки которой имеют вид кружков.
Листинг 22.6
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineCap = "round";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(180, 20);
ctxCanvas.stroke();
Свойство lineJoin задает форму точек соединения линий друг с другом. Его значение может быть одной из следующих строк:
— "miter" — точки соединения имеют вид острого или тупого угла (значение по умолчанию);
— "round" — точки соединения, образующие острые углы, скругляются;
— "bevel" — острые углы, образуемые соединяющимися линиями, как бы срезаются.
Web-сценарий из листинга 22.7 рисует контур треугольника толстыми линиями, причем точки соединения этих линий, образующие острые углы, будут срезаться.
Листинг 22.7
ctxCanvas.beginPath();
ctxCanvas.lineWidth = 10;
ctxCanvas.lineJoin = "bevel";
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
Свойство miterLimit задает дистанцию, на которую могут выступать острые углы, образованные соединением линий, от точки соединения, когда для свойства lineJoin задано значение "miter". Углы, выступающие на бóльшую дистанцию, будут срезаны.
Значение данного свойства задается в пикселах в виде числа. Каково его значение по умолчанию, автору выяснить не удалось.
Листинг 22.8 содержит исправленный вариант Web-сценария, приведенного ранее.
Листинг 22.8
ctxCanvas.beginPath();
ctxCanvas.lineJoin = "miter";
ctxCanvas.lineWidth = 10;
ctxCanvas.miterLimit = 1;
ctxCanvas.moveTo(20, 20);
ctxCanvas.lineTo(380, 20);
ctxCanvas.lineTo(200, 280);
ctxCanvas.closePath();
ctxCanvas.stroke();
Дистанция, на которую могут выступать острые углы, образованные соединением линий контура, не должна превышать одного пиксела. Углы, выступающие на бóльшую дистанцию, будут срезаны.
Вывод текста
Было бы странно, если канва не позволяла выводить произвольный текст. Существуют два метода и несколько свойств для вывода текста.
Метод strokeText выводит заданный текст в указанное место. Текст рисуется в виде контура, без заливки; цвет контура задается значением свойства strokeStyle: <контекст рисования>.strokeText(<выводимый текст>,<горизонтальная координата>, <вертикальная координата>[, <максимальная ширина>])
Первый параметр этого метода задает выводимый текст в виде строки. Второй и третий параметры задают координаты точки, в которой будет выведен текст, в пикселах в виде чисел. По умолчанию выводимый текст будет выровнен по левому краю относительно этой точки.
Четвертый, необязательный, параметр определяет максимальное значение ширины, которую может принять выводимый на канву текст. Если выводимый текст получается шире, канва выводит его либо шрифтом с уменьшенной шириной символов (если данный шрифт поддерживает такое начертание), либо шрифтом меньшего размера.
Метод strokeText не возвращает результата. Пример:
ctxCanvas.strokeStyle = "blue";
ctxCanvas.strokeText("Всем привет!", 200, 50, 100);
Метод fillText также выводит заданный текст в указанное место. Однако текст этот представляет собой одну заливку, без контура; цвет заливки задается значением свойства fillStyle: <контекст рисования>.fillText(<выводимый текст>,<горизонтальная координата>, <вертикальная координата>[, <максимальная ширина>])
Формат вызова этого метода такой же, как и у метода strokeText:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.fillText("Всем пока!", 50, 100);
Свойство font позволяет задать параметры шрифта, которым будет выводиться текст. Параметры шрифта указывают в том же формате, что и у значения атрибута стиля font (см. главу 8), в виде строки:
ctxCanvas.fillStyle = "yellow"; ctxCanvas.font = "italic 12pt Verdana"; ctxCanvas.fillText("Всем пока!", 50, 100);
Свойство textAlign позволяет задать горизонтальное выравнивание выводимого текста относительно точки, в которой он будет выведен (координаты этой точки задаются вторым и третьим параметрами методов strokeText и fillText). Это свойство может принимать следующие значения:
— "left" — выравнивание по левому краю;
— "right" — выравнивание по правому краю;
— "start" — выравнивание по левому краю, если текст выводится по направлению слева направо, и по правому краю в противном случае (значение по умолчанию);
— "end" — выравнивание по правому краю, если текст выводится по направлению слева направо, и по левому краю в противном случае;
— "center" — выравнивание по центру.
Пример:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font = "italic 12pt Verdana";
ctxCanvas.textAlign = "center";
ctxCanvas.fillText("Всем пока!", 100, 100);
Свойство textBaseline позволяет задать вертикальное выравнивание выводимого текста относительно точки, в которой он будет выведен. Это свойство может принимать следующие значения:
— "top" — выравнивание по верху прописных (больших) букв;
— "hanging" — выравнивание по верху строчных (маленьких) букв;
— "middle" — выравнивание по середине строчных букв;
— "alphabetic" — выравнивание по базовой линии букв европейских алфавитов
(значение по умолчанию);
— "ideographic" — выравнивание по базовой линии иероглифических символов
(она находится чуть ниже базовой линии букв европейских алфавитов);
— "bottom" — выравнивание по низу букв. Пример:
ctxCanvas.fillStyle = "yellow";
ctxCanvas.font = "italic 12pt Verdana";
ctxCanvas.textAlign = "center";
ctxCanvas.textBaseline = "top";
ctxCanvas.fillText("Всем пока!", 100, 100);
Использование сложных цветов
Ранее для линий и заливок у нас были только простые, однотонные, цвета. Настала пора познакомиться со средствами канвы для создания и использования сложных цветов: градиентных и графических.
Линейный градиентный цвет
В линейном градиентном цвете (или просто линейном градиенте) один простой цвет плавно переходит в другой при движении по прямой линии. Пример такого цвета — окраска заголовка окна в Windows 2000 и более поздних версиях Windows при выборе классической темы; там синий цвет плавно перетекает в белый.
Линейный градиентный цвет создают в три этапа.
Первый этап — вызов метода createLinearGradient — собственно создание линейного градиентного цвета:
<контекст рисования>.createLinearGradient(<горизонтальная координата начальной точки>,<вертикальная координата начальной точки>,<горизонтальная координата конечной точки>,<вертикальная координата конечной точки>)
Параметры этого метода определяют координаты начальной и конечной точки воображаемой прямой, по которой будет "распространяться"
