Я пытаюсь узнать некоторые из<canvas> API прямо сейчас. Я поручил себе создание простых аналоговых часов с рабочими стрелками (секунда, минута и час).

Рамка часов, лицо и стрелки нарисованы одним и тем же элементом. Я создалdrawScene() функция, которая запускается каждую секунду и перерисовывает все часы. Если вы хотите более детально изучить код, я опубликую его в jsbin-ссылке внизу этого поста.

Цель дляdrawScene() метод для вызоваdrawClockFace() метод, который передает текущую секунду / минуту / час отдельным функциям, которые рисуют руку на основе пройденного времени (т.е.drawSecondHand(currentSecond)).

вопрос:

Как вращать отдельные компоненты холста (т.е. секундную стрелку на моих часах), не вращая весь холст? Я знаю, что мне нужно рассчитать, где провести линию от центра источника, исходя из текущей секунды. Я просто не уверен, что для определения «где» провести черту необходимо провести геоэтрический расчет.

Вот что у меня есть - обратите внимание, что это не супер чистый, потому что я с этим смирился.http://codepen.io/tconroy/pen/BcEbf