HTML5. Работа с Canvas

Рисование дуг и кривых

Для рисования дуг используется метод arc:

arc(x, y, r, sА, eА, a)

Методу передаются

• x и y - центр окружности;
• r - радиус окружности;
• sA - начальный угол;
• eA - конечный угол;
• а - направление.

Рассмотрим на следующем примере:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 75, 1.2*Math.PI, 1.8 * Math.PI, false);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "black";
  ctx.stroke();

   }

В результате получим следующую дугу:

Рис. 23.6. Пример отрисовки дуги

Частным случаем дуги является окружность, изменив одну строку предыдущего примера, а именно значения начального и конечного угла для метода arc (на ноль и соответственно), получим следующий результат:

Рис. 23.7. Пример отрисовки окружности

Рисование кривых Безье

Для построения квадратичной и кубической кривых используются соответственно функции:

• quadraticCurveTo (Px, Py, x, y)
• bezierCurveTo (P1x, P1y, P2x, P2y, x, y)

x и y это точки в которые необходимо перейти, а координаты P(Px, Py) в квадратичной кривой это дополнительные точки которые используются для построения кривой. В кубической кривой соответственно две дополнительные точки.

Следующий пример продемонстрирует отрисовку обеих кривых:

function createImage() 
  {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(10, 15);
  ctx.bezierCurveTo(75, 55, 175, 20, 250, 15);
  ctx.moveTo(10, 15);
  ctx.quadraticCurveTo(100, 100, 250, 15);
  ctx.stroke();
   }

Результат можно увидеть в браузере:

Рис. 23.8. Пример отрисовки кривых Безье