Учебник по дугам HTML5 Canvas

Рисование дуг

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

Радиан — это стандартная единица измерения угла, используемая во многих областях математики. Измерение угла в радианах численно равно длине соответствующей дуги единичного круга, поэтому один радиан составляет чуть менее 57,3 градуса (когда длина дуги равна радиусу). Радиан обозначается символом rad. Альтернативный символ — буква в верхнем индексе c. Так, например, значение 1,3 радиана можно записать как 1,3 рад или 1,3 ^c . См. Следующую схему:

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

 var radians = градусы * Math.PI/180 

arc Метод: arc (x, y, radius, startAngle, endAngle, direction)

Пример: дуга холста HTML5 с использованием метода arc ()

Следующий веб-документ создает простую дугу.

Вывод:

Код:

         холст   var canvas = document.getElementById ('demoCanvas');  var ctx = canvas.getContext ('2d'); var x = 90; var y = 100; var radius = 75; var startAngle = 1.1 * Math.PI; var endAngle = 1.9 * Math.PI; var  counterClockwise = false; ctx.beginPath (); ctx.arc (x, y, radius, startAngle, endAngle, counterClockwise); ctx.lineWidth = 10;//цвет линииctx.strokeStyle = 'green'; ctx. stroke ();     
 Пример: разные дуги холста HTML5 
 
 Следующий веб-документ создает различные  типы дуг. 
 
  Вывод:  
 
  
 
  Код:  
 
      Пример примера дуг   function misc_curves () {var canvas = document.getElementById ("Mycanvas");  если (холст.getContext) {var context = canvas.getContext ("2d");  for (var i = 0; i <2; i ++)//Шаг через две строки.  {//Перебираем три версии.  for (var j = 0; j <3; j ++) {context.beginPath ();//Координата x.  var x = 35 + j * 50; //Координата Y.  var y = 35 + i * 50; //Радиус дуги.  var radius = 20; //Начальная точка на окружности.  вар startAngle = 0; //конечная точка на окружности.  var endAngle = Math.PI + (Math.PI * j)/2; //Направление рисования.  var против часовой стрелки = i% 2 === 0?  false true; //Создаем дуговую траекторию.  context.arc (x, y, радиус, startAngle, endAngle, против часовой стрелки); //Показать дуги context.stroke ();  }}}}     холст     
 Рисование кругов 
 Дуга - это часть круга.  Чтобы нарисовать круг, нарисуйте дугу с начальным углом 0 и конечным углом 2 x Пи.  Вот пример: 
  Вывод:  
    
  Код:  
         холст   var canvas = document.getElementById ('demoCanvas')  ; var ctx = canvas.getContext ('2d'); var x = 90; var y = 100; var radius = 75; var startAngle = 0; var endAngle = 2 * Math.PI; var counterClockwise = false; ctx.beginPath  (); ctx.arc (x, y, radius, startAngle, endAngle, counterClockwise); ctx.lineWidth = 10;//цвет линии ctx.strokeStyle = 'blue'; ctx.stroke ();    
 Метод arcTo: arcTo (x1, y1, x2, y2, radius) 
 Метод arcTo () создает дугу  радиуса между двумя касательными.  Первая касательная определяется воображаемой линией, проведенной через последнюю точку пути и точку (x1, y1).  Вторая касательная определяется воображаемой линией, проведенной через точку (x1, y1) и точку (x2, y2).. 
  Синтаксис:  
 arcTo (x1, y1, x2, y2, radius); 



 Параметры 
 Тип 
 Описание 



 x1 

 number 
 Координата x для первой касательной, которая пересекается с текущей точкой пути  . 



 y1 

 число 
 y  -координата первой касательной, которая пересекается с текущей точкой. 


 x2 
 number 
 Координата x для второй касательной, которая пересекается с точками x1 и y1. 


 y2 
 number 
 Координата y для второй касательной, которая пересекается с точками x1 и y1. 


 radius 
 число 
 Радиус создаваемой дуги. 


  Пример  : HTML5 Canvas arcTo () method  
 В следующем веб-документе создается закругленный угол между горизонтальной и вертикальной линией.  
  Вывод:  
    
  Код:  
           var canvas = document.getElementById ("myCanvas"); if (canvas.getContext  ) {var ctx = canvas.getContext ("2d");//Рисуем воображаемые касательные синим цветом.ctx.beginPath (); ctx.lineWidth = "3"; ctx.strokeStyle = "black"; ctx.moveTo (80  , 100); ctx.lineTo (240, 100); ctx.moveTo (200, 60); ctx.lineTo (200, 220); ctx.stroke (); //Нарисуйте его.//Создайте две линии, которые имеют соединительную дугу, которую можно использовать в качестве начала для закругленного прямоугольника. Ctx.beginPath (); ctx.strokeStyle = "red"; ctx.lineWidth = "5"; ctx  .moveTo (120, 100); //Создаем начальную точку .ctx.arcTo (200, 100, 200, 220, 75); //Создаем arc.ctx.stroke ();  }    
 Холст HTML5: рисование кривых Безье 
 Кривые Безье используются в компьютерной графике для создания  кривые, которые кажутся достаточно гладкими на всех уровнях.  Первоначально разработан Пьером Безье в 1970-х годах для операций CAD/CAM.  В векторной графике кривые Безье используются для моделирования гладких кривых, которые можно масштабировать до бесконечности.  «Пути», как их обычно называют в программах обработки изображений, представляют собой комбинации связанных кривых Безье.  Кривые Безье также используются в анимации как инструмент для управления движением 
 Кривые Безье можно рисовать так же, как вы рисуете линии, но вместо использования метода lineTo () вы используете либо  bezierCurveTo () или quadraticCurveTo () метод. bezierCurveTo () соединяет конечные точки с кубической кривой Безье, используя указанную пару контрольных точек, а метод quadraticCurveTo () соединяет конечные точки с квадратичной кривой Безье с помощью одной указанной контрольной точки. 
 bezierCurveTo  () метод 
 Кубическая кривая Безье должна включать три точки.  Первые две точки (cp1x, cp1y) и (cp2x, cp2y) являются контрольными точками, которые используются в вычислении кубической кривой Безье, а последняя точка (x, y) является конечной точкой кривой.  
  Синтаксис:  
 bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y) 




 Параметры 
 Тип 
 Описание 


 cp1x 
 number 
 Координата x первой контрольной точки Безье. 


 cp1y 
 number 
 Координата Y первой контрольной точки Безье. 


 cp2x 
 number 
 Координата x второй контрольной точки Безье. 


 cp2y 
 number 
 Координата Y второй контрольной точки Безье. 


 x 
 number 
 Координата x точки, которую нужно добавить к текущему пути. 


 y 
 number 
 Координата y точки, которую нужно добавить к текущему пути. 



 Примечание. Первая точка кривой - это последняя точка в существующем текущем подпутье.  Если путь не существует, используйте методы beginPath и moveTo для создания начальной точки. 
 См. Следующую диаграмму: 
 
 На приведенной выше диаграмме: 

 (0, 0) - это верхнее левое положение  холст.  
 (0, 400) - это нижнее левое положение холста.  
 (0, 500) - это верхнее правое положение холста.  
 (400, 500) - это нижнее правое положение холста.  
 (0, 300) - начальная точка кривой. 
 (150, 0) ie (cp1x, cp1y) - первая контрольная позиция кривой  .  
 (350, 0) ie (cp2x, cp2y) - вторая контрольная позиция кривой. 
 (500, 300) ie (x, y) - это  конечная точка кривой.  

  Пример: кривая Безье холста HTML5 с использованием метода bezierCurveTo ()  
 В следующем веб-документе рисуется несколько прямых линий  и кривой Безье (между двумя точками) и создает символ "R". 
  Вывод:  
 
            var canvas = document.getElementById ("DemoCanvas"); var ctx = canvas.getContext ("2d"); ctx.lineWidth = 7; ctx.lineCap = "round"; ctx.clearRect (0, 0, canvas.width,  холст. height); ctx.beginPath (); ctx.moveTo (30, 200); ctx.lineTo (30, 50); ctx.lineTo (65, 50); ctx.moveTo (30, 120); ctx.lineTo (65  , 120); ctx.lineTo (100, 200); ctx.strokeStyle = "черный"; ctx.stroke (); ctx.beginPath (); ctx.moveTo (65, 50); ctx.bezierCurveTo (120, 50,  120, 120, 65, 120); ctx.strokeStyle = "green"; ctx.stroke ();    
 quadraticCurveTo (  ) метод 
 Для квадратичной кривой Безье требуются две точки.  Первая точка - это контрольная точка, которая используется в квадратичном вычислении Безье, а вторая точка - конечная точка кривой. 
  Синтаксис:  
 quadraticCurveTo (cp1x, cp1y, x, y); 




 Параметры 
 Тип 
 Описание 


 cp1x 
 number 
 Координата x контрольной точки Безье. 


 cp1y 
 number 
  y-координата контрольной точки Безье. 


 x 
 number 
 x-  координата точки, которую нужно добавить к текущему пути. 


 y 
 number 
  Y-координата точки, которую нужно добавить к текущему пути. 



 Примечание. Начальной точкой кривой является последняя точка.  в существующем текущем подпутье.  Если путь не существует, используйте методы beginPath () и moveTo () для установки начальной точки. 
 См. Следующую диаграмму: 
   
 На диаграмме выше: 

 (0, 0) - верхний левый  положение холста.  
 (0, 400) - это нижнее левое положение холста.  
 (0, 500) - это верхнее правое положение холста.  
 (400, 500) - это нижнее правое положение холста.  
 (0, 300) - начальная точка кривой. 
 (250, 0) т.е. (cp1x, cp1y) - это контрольная позиция кривой.  
 (500, 300) т.е. (x, y) - конечная точка кривой.  

 Пример: квадратичная кривая Безье холста HTML5 с использованием метода quadraticCurveTo () 
 В этом примере шесть фигур вместе создают следующую графику.  
  Вывод:  
    
  Код:  
           var canvas = document.getElementById ('DemoCanvas');  если (холст.getContext) {var ctx = холст.getContext ('2d'); //Рисуем фигуры ctx.beginPath ();  ctx.moveTo (75,25);  ctx.quadraticCurveTo (25,25,25,62.5);  ctx.quadraticCurveTo (25,100,50,100);  ctx.quadraticCurveTo (50,120,30,125);  ctx.quadraticCurveTo (60,120,65,100);  ctx.quadraticCurveTo (125,100,125,62,5);  ctx.quadraticCurveTo (125,25,75,25);  ctx.lineWidth = "3";  ctx.strokeStyle = "зеленый";  ctx. Инсульт();  } else {alert ('Не поддерживается в этом браузере.');  }    
 См. общий редактор Pen html css от w3resource (@ w3resource) наCodePen.