Как нарисовать минутную и часовую стрелки?

Question

[Петр]

Есть вот такая вот секундная стрелка.
Как сделать так, чтобы минутная стрелка и часовая двигались как на настоящих часах?
Просто передача текущих минут или часов не подходит. Так как стрелка хоть и показывает текущие минуты, но двигается лишь тогда, когда минута целая.

Answer 1

[0xD34F]

Так?

Comments

[Петр]

Надо, что бы стрелка минутная двигалась по чуть чуть. Как в этом примере.
Но задача стоит не просто "содрать" решение. А разобраться. Как его при случае на коленке реализовать.
Не обязательно все 3 стрелки. К примеру если вывести только минутную, она по чуть чуть должна двигаться.
Мне кажется, что за основу движения надо брать секунды. И как то на основе секунд, высчитывать пройденное расстояние для минуты. Но сколько сам не пытался, ничего не выходит адекватного.

[0xD34F]

Петр, так?

[Петр]

0xD34F, Именно) А можно пару пояснений? Почему так происходит?

[0xD34F]

Петр,

Почему так происходит?

Что "так"? Конкретизируйте свой вопрос.

[Петр]

0xD34F, Вот этот момент интересует.
val = 2 * Math.PI * val / max - Math.PI / 2;

Это высчитывается участок радиуса, который пройдет стрелка?

[0xD34F]

Петр,
2 * PI - это 360 градусов

val / max - отношение текущего значения стрелки и максимально возможного (соответствующего полному обороту, 360 градусам), определяет угол поворота

-PI / 2 - поворот на 90 градусов против часовой стрелки. Поскольку на координатной плоскости нулевой угол поворота соответствует вектору (1, 0), а начальное положение стрелок часов соответствует вектору (0, 1) - надо внести поправку.

[Петр]

0xD34F, Теперь дошло. Спасибо за ответ:)

[kulaeff]

Петр, вы это, прекращайте использовать setInterval для графических манипуляций, лучше используйте requestAnimationFrame.