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();
}
}
}
Screenshot | Live sample |
---|---|
![]() |
Спецификации
Спецификация | Статус | Коментарий |
---|---|---|
HTML Living Standard Определение 'CanvasRenderingContext2D.arc' в этой спецификации. |
Живой стандарт |
Поддержка браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Да) | (Да) | (Да) | (Да) | (Да) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Да) | (Да) | (Да) | (Да) | (Да) | (Да) |
Примечания относительно Gecko
Начиная с Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1):
- Параметр
anticlockwise
опциональный, - Указывание отрицательного радиуса теперь приводит к ошибке
IndexSizeError
error ("Index or size is negative or greater than the allowed amount").
Смотрите также
- Интерфейс
Canvas
,CanvasRenderingContext2D