Опубликован: 01.08.2012 | Уровень: для всех | Доступ: платный | ВУЗ: Томский политехнический университет
Лекция 19:

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 (на ноль и 2*\pi соответственно), получим следующий результат:

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

Рис. 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. Пример отрисовки кривых Безье
Галина Башкирова
Галина Башкирова

Здравствуйте, недавно закончила курс по проф веб программиованию, мне прислали методические указания с примерами тем, однако темы там для специальности 

Системный администратор информационно-коммуникационных» систем.
Мне нужно самой найти тему? или делать по высланным темам

 

Константин Моренко
Константин Моренко
Алексей Бегунов
Алексей Бегунов
Беларусь
Виктор Лабутин
Виктор Лабутин
Россия