Дронов Владимир
Шрифт:
Web-сценарий из листинга 22.3 рисует красный сектор окружности с красной же заливкой. Мы проводим кривую Безье с одной контрольной точкой, имеющую вид дуги, и соединяем ее начальную и конечную точки с центром воображаемой окружности.
Еще один пример приведен в листинге 22.4.
Листинг 22.4
ctxCanvas.beginPath;
ctxCanvas.moveTo(20, 0);
ctxCanvas.lineTo(180, 0);
ctxCanvas.quadraticCurveTo(200, 0, 200, 20);
ctxCanvas.lineTo(200, 80);
ctxCanvas.quadraticCurveTo(200, 100, 180, 100);
ctxCanvas.lineTo(20, 100);
ctxCanvas.quadraticCurveTo(0, 100, 0, 80);
ctxCanvas.lineTo(0, 20);
ctxCanvas.quadraticCurveTo(0, 0, 20, 0);
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". Углы, выступающие на б'oльшую дистанцию, будут срезаны.
Значение данного свойства задается в пикселах в виде числа. Каково его значение по умолчанию, автору выяснить не удалось.
Листинг 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;