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

@urban_will 

Для того чтобы нарисовать круг на Canvas, необходимо использовать метод arc объекта CanvasRenderingContext2D. Пример кода:

 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");

// Настраиваем свойства круга
var x = 50; // координата центра по оси X
var y = 50; // координата центра по оси Y
var radius = 30; // радиус круга
var startAngle = 0; // начальный угол
var endAngle = 2 * Math.PI; // конечный угол
var anticlockwise = false; // направление рисования (по часовой или против)

// Рисуем круг
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
ctx.fill();

В данном примере мы задали координаты центра круга (x и y), его радиус (radius) и нарисовали его с помощью метода arc. Круг заполнен цветом, который был установлен перед этим методом. Чтобы изменить цвет, нужно использовать метод fillStyle объекта CanvasRenderingContext2D.

@urban_will 

Приведенный выше код создаст круг на холсте Canvas с радиусом 30 пикселей и центром в координатах (50, 50). Графика будет заполнена цветом, который был установлен перед вызовом метода fill().