CanvasRenderingContext2D.arc()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CanvasRenderingContext2D.arc() метод Canvas 2D API добавляет дугу к пути с центром (x, y) и с радиусом r с началом в startAngle и с концом endAngle и с направлением против часовой стрелки (по умолчанию по часовой стрелке).

Синтаксис

void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

Параметры

x

X координата центра дуги.

y

Y координата центра дуги.

radius

Радиус.

startAngle

Угол начала дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.

endAngle

Угол завершения дуги. Измеряется по часовой стрелке от положительной оси Х, выражается в радианах.

anticlockwise Необязательный

Необязательный Boolean. Задаёт направление рисования дуги. Если true - против часовой, false - по часовой.

Примеры

Использование метода arc

Ниже приведён пример простого кода который рисует круг.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

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

Демонстрация разных форм дуг

В этом примере нарисованные разные формы чтобы показать возможности метода arc().

js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Draw shapes
for (i = 0; i < 4; i++) {
  for (j = 0; j < 3; j++) {
    ctx.beginPath();
    var x = 25 + j * 50; // x coordinate
    var y = 25 + i * 50; // y coordinate
    var radius = 20; // Arc radius
    var startAngle = 0; // Starting point on circle
    var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
    var anticlockwise = i % 2 == 1; // Draw anticlockwise

    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

Спецификации

Specification
HTML Standard
# dom-context-2d-arc-dev

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также