Метод 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>.
