Стрелочные часы (21.10.2012)
Для моделирования вращательного движения по окружности необходимо рассчитать лежащие на ней проходимые точки, при этом плавность хода, т.е. количество таких точек, определяется углом поворота за шаг. Координаты каждой точки определяются тригонометрическими функциями угла между проходящим через нее радиусом и положительным направлением оси абсцисс: синус равен координате по Y, косинус - по X.
Первый пришедший в голову вкусный и полезный пример использования всего этого добра - разместить на canvas'е стрелочные часы.
Для начала необходимо получить текущие значения для каждой стрелки и выразить их в углах.
  var date = new Date();
  var a = [Math.PI/30*date.getHours()*5, Math.PI/30*date.getMinutes(), Math.PI/30*date.getSeconds()];
Если использовать синусы и косинусы данных углов для рисования стрелок, то выйдет, что сутки начинаются в 3 часа, а сами часы идут задом наперед. Чтобы этого избежать, необходимо поменять местами X и Y, и изменить знак у Y.
На холсте стрелки будем рисовать методом lineTo:
  for (var i in a) {
    ...
    context340.moveTo(150,150); //центр
    n = parseInt(i)+1; //длина стрелки
    context340.lineWidth=2/n; //толщина
    context340.lineTo(Math.round(n*50*Math.sin(a[i])+150),Math.round(-n*50*Math.cos(a[i]))+150);
    ...
  }
JavaScript, Canvas
comments powered by Disqus
JavaScript (13)
PHP (11)
Brainfuck (8)
adm (8)
Joomla (4)
Canvas (3)
answers (2)
API (2)
CMS (2)
Modx (2)
jQuery (1)
Ajax (1)
SQL (1)
Shell (1)
batch (1)
10-6