Compile!
I just saw my life flash before my eyes and all I could see was a close tag.
Стрелочные часы
(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
Please enable JavaScript to view the
comments powered by Disqus.
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