Комментарий: Arc и Arcto можно увидеть от имен их. Arcto также является методом рисования кривых, а кривая, которую он рисует, также является дугой идеального круга. Но его параметры и дуга просто неубедительны ~ Заинтересованные друзья могут узнать об этом. Далее, давайте подробно представим метод ARCTO.
В предыдущей статье говорилось о методе холста Arc, и в этой статье говорилось о методе Arcto, связанном с ним.Arc и Arcto можно увидеть по именам их. Arcto также является методом рисования кривых, а кривая, которую он рисует, также является дугой идеального круга. Но его параметры и дуги просто не имеют значения ~
ctx.arcto (x1, y1, x2, y2, radius); Параметры Arcto включают две точки, и эти две точки не представляют центр круга. Только последний параметр - это радиус круга, указывающий, что Arcto и Circle имеют небольшую связь.
Есть очень мало статей об Arcto Online, и я наконец обнаружил, что один из них - иностранный; И нет интуитивного инструмента для рисунка холста, поэтому я могу только догадываться, Арто заставил меня догадаться в течение долгого времени. Полем
Для интуитивного описания я принял вспомогательный метод: где бы ни был нарисован Arcto, я использовал Lineto, чтобы нарисовать соответствующие точки, чтобы увидеть их отношения. Просто нарисуйте вспомогательные линии.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 450,
y2 = 450;
ctx.beginpath ();
ctx.moveto (x0, y0);
ctx.strokestyle = "#f00";
ctx.linewidth = 2;
ctx.arcto (x1, y1, x2, y2,20);
ctx.stroke ();
ctx.beginpath ();
ctx.strokestyle = "rgba (0,0,0,0,5)";
ctx.linewidth = 1;
ctx.moveto (x0, y0);
ctx.lineto (x1, y1);
ctx.filltext ('x1, y1', x1+10, y1+10)
ctx.lineto (x2, y2);
ctx.filltext ('x2, y2', x2+10, y2)
ctx.stroke ();
Кажется, что есть много кода, но на самом деле это очень просто. Я использовал несколько переменных для сохранения значений координат, а остальные были операциями на холсте.
Переменная Описание: x0, Y0 - координата отправной точки, x1, Y1 - координата первой точки, а x2, Y2 - координата второй точки. Прямая линия, нарисованная Lineto, представляет собой полупрозрачную черную линию 1PX, а линия, нарисованная Arcto, представляет собой красную линию 2PX.
Обновите страницу, и вы увидите изображение ниже.
Я должен сказать, что эта красная линия выглядит как крючок.
Таким образом, закон Аркто был найден. На самом деле он сформировал угол через две прямые линии в начальной точке, точке 1 и точке 2, и эти две линии также являются касательными линиями круга параметров.
Радиус круга определяет, где круг будет расщеплять края линией. Это как мяч, катящий в тупик. Чем меньше мяч, тем больше он катится, тем ближе он приближается к мертвым углу; Чем больше мяч, наоборот.
Это очень серьезная академическая проблема, так что не хочу YY.
Давайте сделаем мяч больше!
ctx.arcto (x1, y1, x2, y2,50); // радиус изменен на 50
Как показано на рисунке, вы можете видеть, что дуга стала большой и даже не касается прямой линии.
Конечно, они на самом деле все еще касаются, потому что касательная бесконечно расширена.
Мы продолжаем исследовать, продолжаем выращивать круг и сокращать расстояние между отправной точкой и первой точкой.
var x0 = 400; // начальная точка x изменяется с 100 до 400
...
ctx.arcto (x1, y1, x2, y2,100); // Радиус круга становится больше до 100, и вы увидите такую странную фигуру.
Первоначально это был крюк, но теперь он был согнут и повернулся в противоположном направлении! Это немного похоже на держатель бутылки.Однако обратите внимание, что этот круг все еще касается двух строк! Но теперь длина двух линий не может удовлетворить этот круг! Он расширил оба провода по беспроводной связи!
Когда эта ручка крючков будет обращена вспять? Если у вас хорошая геометрия, вы можете попытаться понять касательные уравнения точек и кругов.
В методе Arcto есть очень важный момент. Этот важный момент (x1, y1) в коде. Пока расстояние от него до касательной точки круга превышает расстояние от него до начальной точки (x0, y0), оно изменится.
Из фигуры мы видим, что координаты этой точки (x2, Y2) могут меняться бесконечно. Пока это всегда точка на касательной, то график, нарисованный Arcto, вообще не будет изменяться, когда радиус круга остается неизменным. Это требует особого внимания.
Позвольте мне использовать мои геометрические знания, которые я не могу получить в таблице, чтобы проверить это предложение. Для расчета я сначала изменил угол между двумя линиями на 90 градусов.
var x0 = 100,
y0 = 400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;
После изменения он будет открыт на 90 градусов! Мы держим радиус мяча без изменений. После освежения:
Мы делаем Y2 больше, то есть расширяем линию касательной, превращаем ее в 550 и обновляйте:
Тангаентная линия расширена, но красная линия, нарисованная Arcto, вообще не изменилась.