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

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

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

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);

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

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

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

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 = [

<b>&quot;#f44&quot;,                      // Шестнадцатеричное значение RGB: красный</b>

<b>&quot;#44ff44&quot;,                   //  Шестнадцатеричное значение RRGGBB: зеленый</b>

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

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

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

”rgba(0,0,0,0)", // Совершенно прозрачный черный

"transparent", // Синоним предыдущего цвета

"”hsl(60, 100%, 50%)", // Насыщенный желтый

"hsl(60, 75%, 50%)", // Менее насыщенный желтый

<b>&quot;hsl(60, 100%, 75%)&quot; ,       // Насыщенный желтый, немного светлее</b>

<b>&quot;hsl(60. 100%, 25%)&quot;,        // Насыщенный желтый, немного темнее</b>

"hsla(60, 100%, 50%, 0.5)", // Насыщенный желтый, прозрачный на 50%

];

При использовании формата HSL цвет описывается тремя числами, определяющими тон (hue), насыщенность (saturation) и яркость (lightness). Тон (hue) - это величина угла в цветовом круге. Значение 0 соответствует красному цвету, 60 - желтому, 120 - зеленому, 180 - бирюзовому, 240 - синему, 300 - сиреневому и 360 -опять красному. Насыщенность описывает интенсивность цвета и определяется в процентах. Цвета с насыщенностью 0% являются оттенками серого. Яркость описывает степень яркости цвета и также определяется в процентах. Любой цвет в формате HSL со 100-процентной яркостью является белым цветом, а любой цвет с яркостью 0% - черным. В формате HSLA цвет описывается так же, как в формате HSL, но с дополнительным значением альфа-канала, которое изменяется в диапазоне от 0.0 (прозрачный) до 1.0 (непрозрачный).