Каким образом нарисовать круг на Canvas?

Пользователь

от jordi , в категории: Компьютерные технологии , 8 месяцев назад

Каким образом нарисовать круг на Canvas?

Facebook Vk Ok Twitter Telegram Whatsapp

1 ответ

Пользователь

от brook.gottlieb , 8 месяцев назад

@jordi 

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
  
    
    Нарисовать круг на Canvas
  
  
    
    
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      
      ctx.beginPath();
      ctx.arc(100, 100, 50, 0, 2*Math.PI);
      ctx.stroke();
    
  


Функция arc() принимает следующие аргументы:

  • x - координата по оси X центра круга
  • y - координата по оси Y центра круга
  • r - радиус круга
  • startAngle - начальный угол дуги в радианах
  • endAngle - конечный угол дуги в радианах


Чтобы окружность была замкнутой, используйте метод stroke() для рисования контура. Если нужно закрасить внутреннюю часть круга, можно использовать метод fill().