Canvas arcTo() метод
определение и использование
arcTo() метод создает дугу/кривую между двумя касательными на канвасе.
подсказка:Используйте stroke() метод рисует точную дугу на канвасе.
пример
Создайте дугу на канвасе между двумя касательными:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20); // создать точку начала
ctx.lineTo(100,20); // создать горизонтальную линию
ctx.arcTo(150,20,150,70,50); // создать дугу
ctx.lineTo(150,120); // создать вертикальную линию
ctx.stroke(); // выполнить рисование
грамматика
context.fillRect(x1,y1,x2,y2,r);
значение параметра
| параметр | описание |
|---|---|
| x1 | координата x начала дуги |
| y1 | координата y начала дуги |
| x2 | координата x конца дуги |
| y2 | координата y конца дуги |
| r | Радиус дуги |
Поддержка браузеров
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Комментарий:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.
