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
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени (убедитесь, что вы используете браузер, поддерживающий данное свойство - смотрите таблицу совместимости):
Демонстрация разных форм дуг
В этом примере нарисованные разные формы чтобы показать возможности метода arc()
.
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
Смотрите также
- Интерфейс
Canvas
,CanvasRenderingContext2D