Рисование дуг и кривых

Для рисования дуг используется метод arc:

arc(x, y, r, sА, eАe, a)

Методу передаются

• x и y - центр окружности;
• sA - начальный угол;
• eA - конечный угол;
• а - направление.

Рассмотрим на следующем примере:

function createImage()

{

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.arc(150, 100, 75, 1.2*Math.PI, 1.8 * Math.PI, false);

ctx.lineWidth = 5;

ctx.strokeStyle = "black";

ctx.stroke();

}

В результате получим следующую дугу:

Рис. 23.6. Пример отрисовки дуги

Частным случаем дуги является окружность, изменив одну строку предыдущего примера, а именно значения начального и конечного угла для метода arc (на ноль и соответственно), получим следующий результат:

Рис. 23.7. Пример отрисовки окружности