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

Пример 21.7. Добавление кривых в контур

  // Вспомогательная функция для преобразования градусов в радианы
  function rads(x) { return Math.PI*x/180; }

  // Нарисовать окружность. Используйте масштабирование и вращение, если требуется
  // получить эллипс. Здесь не используется текущая точка, поэтому окружность рисуется
// без прямой линии, соединяющей текущую точку с началом окружности,
  с.beginPath;
  с.агс(75,100,50, // Центр в точке (75,100), радиус 50
   0,rads(360),false); // По часовой стрелке от 0 до 360 градусов

  // Нарисовать сектор. Углы откладываются по часовой стрелке от положительной оси х.
  // Обратите внимание, что метод агс добавляет линию от текущей точки к началу дуги.
  c.moveTo(200, 100); // Перейти в центр окружности
  с.агс(200, 100, 50, // Центр окружности и радиус
   rads(-60), rads(0), // Начальный угол -60 градусов, конечный 0 градусов
   false); // false означает по часовой стрелке
  с.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, чтобы сделать полупрозрачным все, что будет рисоваться.