Рисование дуги на холсте с помощью arcTo

Метод arcTo определяет дугу как продолжение прямой линии или другой формы.

Отличие от метода дуги состоит в том, что начальная и конечная точки определяются не углом, а координатами.

Фактически, рисование arcTo не интуитивно понятно; точки координат являются направлениями, а не точными местоположениями, и одна и та же форма может быть получена с различными координатами для конечной точки. Рисунок выше может помочь вам лучше понять это.

arcTo имеет две координаты и радиус в качестве аргументов

Метод имеет две пары координат, x1, y1 и x2, y2, плюс радиус, в качестве аргументов.

arcTo(x1, y1, x2, y2, radius)

Но это также зависит от другой точки, x0, y0, которая не указана в инструкции. Эти неявные координаты являются либо координатами последней точки ранее нарисованной фигуры, либо координатами данной точки путем вызова метода lineTo перед вызовом arcTo.

Поэтому arcTo можно использовать с двумя методами:

lineTo(x0, y0);
arcTo(x1, y1, x2, y2, radius)

или с любой другой формой:

rect(x, y, width, height)
arcTo(x1, y1, x2, y2, radius)

Общие сведения о arcTo

Метод

Точку
• необходимо сначала поместить с помощью такого метода, как lineTo, moveTo или другого метода canvas, рисующего фигуру.
• Когда фигура только что нарисована, в качестве начальной точки для рисования arcTo берется последняя точка фигуры.
• Рисунок, создаваемый arcTo, зависит от этой точки x0, y0 и заданных ей аргументов.
• Представим окружность, радиус которой задан параметром «radius» метода arcTo.
• Первая касательная к этой окружности следует за прямой от x0, y0 до x1, y1.
• Вторая касательная к этой окружности проходит через точки x1, y1 и x2, y2.

Пример:

Тот же пример аннотирован:

• x0 =
20
• y0 =
20
• x1 = 380
• y1 =
20
• x2 = 380
• y2 = 380

Демонстрационный исходный код:

<canvas id="canvasTo" width="400" height="400" style="border:1px dotted gray">
</canvas>

<script>
 var canvas = document.getElementById("canvasTo"); 
 var context = canvas.getContext("2d");
 context.beginPath();
 context.lineWidth="3";
 context.strokeStyle="green";
 context.moveTo(20, 20);
 context.arcTo(380, 20, 380, 380, 50);
 context.stroke();
</script>

См. также

• Метод арки Холста.