Метод HTML canvas arc()
Определение и использование
arc() Метод создает дуги/кривые (используется для создания кругов или частей кругов).
Совет:Чтобы создать круг с помощью arc(), установите начальный угол в 0и установите конечный угол в 2*Math.PI.
Совет:Используйте stroke() или fill() Метод рисует реальный дугу на канвасе.
- Центр: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - Начальный угол: arc(100,75,50,
0,1.5*Math.PI) - Конечный угол: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Пример
Создание круга:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
Синтаксис
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Значение параметра
| Параметры | Описание |
|---|---|
| x | X-координата центра круга. |
| y | Y-координата центра круга. |
| r | Радиус круга. |
| sAngle | Начальный угол, измеренный в радианах. (Три часа на круге соответствуют 0 градусам). |
| eAngle | Конечный угол, измеренный в радианах. |
| counterclockwise | Опционально. Определяет, следует ли рисовать против часовой стрелки или по часовой стрелке. False = по часовой стрелке, true = против часовой стрелки. |
Поддержка браузеров
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
