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
# dom-context-2d-arc-dev

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
arc

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

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