Перейти к содержанию

arcTo()

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

Дуга

Примечание: Чтобы действительно нарисовать дугу в элементе <canvas>, используется метод stroke().

Синтаксис

context.arcTo(x1, y1, x2, y2, r);

Параметры

x1
Координата X первой касательной
y1
Координата Y первой касательной
x2
Координата X второй касательной
y2
Координата Y второй касательной
r
Радиус дуги

Спецификация

Пример

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

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

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.beginPath()
// Создаем начальную точку
ctx.moveTo(20, 20)
// Создаем горизонтальную линию
ctx.lineTo(100, 20)
// Создаем дугу
ctx.arcTo(150, 20, 150, 70, 50)
// Продолжаем линию по вертикали
ctx.lineTo(150, 120)
// Рисуем все
ctx.stroke()

Ссылки