Как нарисовать круг на Canvas?
1 ответ
от
adrien.waters ,
10 месяцев назад
@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.
15