мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Метод arc

Метод arc рисует дугу с центром в заданной точке, заданным радиусом. Видимой эта дуга станет, только если применить методы stroke или fill. В первом случае будет контур, а во втором - фигура.

Последний необязательный параметр регулирует направление рисования. Он принимает значение true или false. Значение true рисует дугу по часовой стрелке, а значение false - против часовой (по умолчанию).

Можно задать начальный и конечный углы при рисовании. Эти углы измеряются в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать следующую функцию:

function getRadians(degrees) { return (Math.PI / 180) * degrees; }

Синтаксис

контекст.arc(x, y, радиус, начальный угол, конечный угол, [направление = false])

Пример

Давайте нарисуем окружность:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(360)); ctx.stroke(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }

:

Пример

Давайте нарисуем половинку окружности:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.stroke(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }

:

Пример

Давайте нарисуем половинку круга (закрасим контур с помощью fill):

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas> let canvas = document.querySelector('#canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.fill(); function getRadians(degrees) { return (Math.PI / 180) * degrees; }

:

Смотрите также

  • метод rect,
    который рисует прямоугольник