Метод HTML canvas arcTo()

Руководство по HTML5 Canvas

Определение и использование

arcTo() Метод создает дугу/кривую между двумя касательными на канвасе.

Совет:Используйте stroke() Метод рисует точную дугу на канвасе.

Пример

Создание дуги на канвасе между двумя касательными:

Ваш браузер не поддерживает тег HTML5 canvas.

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>.

Руководство по HTML5 Canvas