Как повернуть начальную позицию дуги в HTML5 canvas на JavaScript

Оффтоп javascript
1

Проблема с поворотом индикатора загрузки

Привет всем! Делаю индикатор прогресса на canvas и столкнулся с проблемой. Зеленая часть индикатора начинается не с верхней точки круга, а смещена примерно на 45 градусов вправо. Нужно чтобы заливка начиналась строго сверху (с позиции 12 часов).

<!DOCTYPE html>
<html>
<head>
    <title>Индикатор прогресса</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script src="progress.js"></script>
</body>
</html>

Вот код JavaScript:

var canvasElement = document.getElementById("myCanvas");
var context = canvasElement.getContext("2d");

// Фон
context.fillStyle = "#2a3d5c";
context.fillRect(0, 0, 400, 400);

// Базовый круг
context.beginPath();
context.lineWidth = 25;
context.strokeStyle = "#3e4445";
context.arc(200, 200, 90, 0, 2 * Math.PI);
context.stroke();

// Случайное значение прогресса
var progressValue = Math.random() * 1.8 + 0.2;
var displayPercent = Math.floor((progressValue / 2) * 100);

// Дуга прогресса (проблема здесь)
context.beginPath();
context.lineWidth = 25;
context.strokeStyle = "#00ff44";
context.arc(200, 200, 90, 0, progressValue * Math.PI);
context.stroke();

// Текст в центре
context.font = "24px Arial";
context.fillStyle = "#00ff44";
context.fillText(displayPercent + "%", 180, 210);

Как сделать так чтобы зеленая дуга начиналась с самого верха? Может нужно как-то повернуть весь контекст или изменить углы? Буду благодарен за любые идеи!

2

у меня была похожая задача недавно! проблема в том что canvas считает 0 радиан от правой части окружности. самый простой способ - прибавить смещение к обоим углам в arc(). вместо arc(200, 200, 90, 0, progressValue * Math.PI) напиши arc(200, 200, 90, -Math.PI/2, progressValue * Math.PI - Math.PI/2). минус пи пополам это как раз 90 градусов вверх от стандартной позиции. работает отлично, проверял на своих проектах.

3

В canvas углы считаются от 3 часов (правая сторона), а не от 12. Просто сдвинь начальный и конечный углы на -Math.PI/2 радиан. Замени строчку с arc на: context.arc(200, 200, 90, -Math.PI/2, (progressValue * Math.PI) - Math.PI/2); Это повернет дугу на 90 градусов против часовой и она будет начинаться точно сверху.

4

Альтернативный способ - использовать rotate() для поворота всего контекста. Добавь context.rotate(-Math.PI/2) перед рисованием дуги, только не забудь сохранить состояние через save() и восстановить restore() после. Какой процент прогресса планируешь показывать максимально?