JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

с.closePath; // Добавить прямую линю к центру окружности

// Тот же сектор, в противоположном направлении

c.moveTo(325, 100);

с.агс(325, 100, 50, rads(-60), rads(0), true); // Против часовой стрелки

c.closePath;

// Использовать агсТо для закругления углов. Здесь рисуется квадрат с верхним левым

//

углом в точке (400,50), с закруглениями углов дугами с разными радиусами.

c.moveTo(450, 50); // Середина верхней стороны,

с.агсТо(500,50,500,150,30); // Насть верхней стороны и правый верхний угол,

с.агсТо(500,150,400,150,20); // Добавить правую сторону и правый нижний угол,

с.агсТо(400,150,400,50,10); // Добавить нижнюю сторону и левый нижний угол,

с.агсТо(400,50,500,50,0); // Добавить левую сторону и левый верхний угол,

с.closePath; // Замкнуть контур, чтобы добавить остаток верхней стороны.

// Квадратичная кривая Безье: одна контрольная точка

c.moveTo(75, 250); // Начало в точке (75,250)

с.quadraticCurveTo(100,200, 175, 250); // Соединить с точкой (175,250)

с.fillRect(100-3,200-3,6,6); // Метка контрольной точки (100,200)

// Кубическая кривая Безье

c.moveTo(200, 250); // Начало в точке (200,250)

с.bezierCurveTo(220,220,280,280,300,250); // Соединить с точкой (300,250)

с.fillRect(220-3,220-3,6,6); // Метки контрольных точек

с.fillRect(280-3.280-3,6,6);

// Определить некоторые графические атрибуты и нарисовать кривые

c.fillStyle = "#aaa"; // Серый цвет заливки

c.lineWidth = 5; // Черные (по умолчанию) линии толщиной 5 пикселов

c.fill; // Залить фигуры

c.stroke; // Нарисовать контуры

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

Объект

CanvasRenderingContext2D

определяет четыре метода рисования прямоугольников. Один из них,

fillRect,

использовался в примере 21.7 для создания меток контрольных точек кривых Безье. Все четыре метода рисования прямоугольников принимают два аргумента, определяющих координаты одного угла прямоугольника, и два аргумента, определяющих ширину и высоту. Обычно указывается верхний левый угол и положительные значения ширины и высоты, но можно также указать другие углы и передать отрицательные размеры.

Метод

fillRect

выполняет заливку внутренней области прямоугольника в соответствии со значением атрибута

fillStyle

. Метод

strokeRect

рисует контур прямоугольника, используя текущее значение атрибута

strokeStyle

и других атрибутов линий. Метод

clearRect

подобен методу

fillRect

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

Последний метод рисования прямоугольников называется

rect

, и он изменяет текущий контур: он добавляет указанный прямоугольник в виде отдельного фрагмента контура. Подобно другим методам определения контуров, сам по себе он не производит ни заливку, ни рисование контура.

21.4.7. Цвет, прозрачность, градиенты и шаблоны

Атрибуты

strokeStyle

и

fillStyle

определяют параметры рисования линий и заливки областей. Чаще всего эти атрибуты используются, чтобы определить непрозрачный или полупрозрачный цвет, но им также можно присваивать объекты

CanvasPattern

и

CanvasGradient

, чтобы рисование или заливка выполнялась с использованием повторяющегося изображения или линейного или радиального градиента. Кроме того, можно воспользоваться свойством

globalAlpha

, чтобы сделать полупрозрачным все, что будет рисоваться.

Чтобы определить сплошной цвет, можно использовать имена цветов, определяемые стандартом HTML4¹(

Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow.

), или использовать строки в формате CSS:

context.strokeStyle = "blue"; // Рисовать синие линии

context. fillStyle = "#aaa"; // Заливку выполнять серым цветом

По умолчанию свойства

strokeStyle

и

fillStyle

имеют значение «#000000», соответствующее непрозрачному черному цвету. Текущие броузеры поддерживают цвета CSS3 и позволяют использовать форматы RGB, RGBA, HSL и HSLA определения цветов вдобавок к базовому формату RGB. Например:

var colors = [

"#f44", // Шестнадцатеричное значение RGB: красный

"#44ff44", // Шестнадцатеричное значение RRGGBB: зеленый

"rgb(60, 60, 255)", // RGB в виде целых 0-255: синий

"rgb(100%, 25%, 100%)", // RGB в виде процентов: пурпурный

"rgba(100%, 25%, 100%, 0.5)",// RGB плюс альфа 0-1: полупрозрачный пурпурный