Рисование дуги на холсте: учебное пособие и интерактивная демонстрация

Дуга является основой многих геометрических фигур; она имеет симметричную форму и может быть определена двумя углами.

Простая фигура, сложное использование

Комбинация дуг может образовывать фигуры, такие как справа, где ориентация может меняться, но каждый фрагмент кривой является дугой и поэтому симметричен.
Для создания несимметричных фигур мы бы использовали методы кривых.

Метод дуги зависит от положения, радиуса и двух углов.

Функция дуги имеет шесть параметров:

1. Горизонтальная начальная точка.
2. Вертикальная начальная точка.
3. Радиус.
4. Начальный угол. Определяет начальный наклон.
5. Конечный угол. Определяет кривизну.
6. Флаг для изменения направления вращения на противоположное: false - по часовой стрелке, true - в противном случае.

Это дает следующий синтаксис:

arc(x, y, radius, angleInitial, angleFinal, [true | false])

Пример дуговой инструкции:

context.arc(100,5, 70, Math.PI, 1,5 * Math.PI, true);

Точка x, y может быть началом новой фигуры; в этом случае вызову arc () предшествует beginPath. Дуга также может быть размещена как продолжение ранее нарисованной формы, и в этом случае она извлекает свои атрибуты, а положение последней нарисованной точки является ее начальным положением.

Простая демонстрация...

Начальный угол равен 0, а конечный - PI. Радиус - 70 пикселей. Направление вращения - false (по часовой стрелке).

Код:

context.arc(150, 5, 70, 0, Math.PI, false); 

Изменение направления вращения

По умолчанию используется направление вращения по часовой стрелке и значение «false». Направление можно изменить на противоположное с помощью дополнительного шестого параметра.

Если шестой параметр имеет значение true, дуга будет нарисована против часовой стрелки .
Пример выше, но с обратным направлением вращения:

Код:

context.arc(150, 75, 70, 0, Math.PI, true);

Определение углов дуги

Угол имеет действительное значение в диапазоне от 0 до 2 PI, которое выражается в JavaScript как 2 * Math.PI.
Это последнее значение соответствует 360 ° (но значения угла не выражены в градусах).
Возьмем пример выше с начальным углом PI и конечным углом дважды PI:

Код:

context.arc(150, 75, 70, Math.PI, 2 * Math.PI, false);

И мы снова находим предыдущую дугу, потому что каждый раз мы имеем дополнение угла из первого примера.

Построение дуги слева

Когда мы рисуем по часовой стрелке, полукруг имеет начальный угол 0 и конечный угол PI.
Круг идет от 0 до 2 PI.
Чтобы нарисовать полукруг влево, мы начинаем с PI/2 и заканчиваем на 1,5 умноженном на PI. Демонстрация:

Чтобы нарисовать правую дугу, задайте для параметра направления вращения значение «true» или используйте значения угла 1,5 PI и 0,5 PI.

Рисование дуги в анимации

Чтобы увидеть, как это работает, в анимации мы изменим начальный угол и конечный угол от 0 до 2 * PI.

Начальное значение угла и конечное :

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

var angle = 0;
var delay; 

function drawAngle(ctxa)
{
 ctxa.arc(150, 50, 40, angle, angle);
 ctxa.stroke();
 angle+=0.1; 
if(angle > 2 * Math.PI) {clearInterval(delay);return;}
 document.getElementById("angle").value = Math.round(angle * 100)/100;
} 

function setAngle()
{
 angle=0;
 var canvas = document.getElementById("canvas4"); 
var ctxa = canvas.getContext("2d"); 
ctxa.lineWidth="3"; 
ctxa.beginPath(); 
delay = setInterval(function(){ drawAngle(ctxa); }, 100);
}
setAngle();

Интерактивная демонстрация метода дуги

Как выбрать начальный и конечный угол, как дать направление вращения, и взаимодействие между всеми этими факторами...
Лучший способ понять их - интерактивная демонстрация.

Код HTML

<canvas id="canvasDemo" width="402" height="202" style="border:1px solid #CCC;background:white">
 Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.
</canvas>

Код JavaScript

function setArc()
{
 var canvas = document.getElementById("canvasDemo"); 
 var context = canvas.getContext("2d");
 
 var x = document.getElementById("x").value;
 var y = document.getElementById("y").value;
 var radius = document.getElementById("radius").value;
 var initial = document.getElementById("startangle").value;
 var final = document.getElementById("endangle").value;
 if(document.getElementById("clock1").checked)
 clock = true;
 else 
 clock = false;
 context.beginPath();
 context.lineWidth="2";
 context.arc(x, y, radius, initial, final, clock)
 context.stroke();
}

function erase()
{
 var canvas = document.getElementById("canvasDemo"); 
 var context = canvas.getContext("2d");
 context.clearRect(0,0, canvas.width, canvas.height);
}

Следующая глава: Метод arcTo определяет дугу с координатами, а не с углом.