JS&canvas 2/7 — Начинаем с примитивов
Пора переходить к делу. Ведь время идет, а часов, чтобы посмотреть ему вслед, все еще нет. Нужно срочно исправлять ситуацию!
День 2.
Чтобы упростить дальнейшую разработку и доработку плагина, разобьем логику рисования часов на несколько блоков:
- Рисование самих часов, их корпус.
- Рисование циферблата.
- Рисование секундной стрелки.
- Рисование минутной стрелки.
- Рисование часовой стрелки.
Для начала сделаем корпус часов. Для этого воспользуемся методом arc(), который рисует дугу окружности. На вход этот метод принимает координаты центра окружности, радиус окружности, а также градусы ограничения дуги. Чтобы нарисовать полную окружность, мы ограничим дугу значением 2*PI. Также нам понадобятся координаты центра окружности — возьмем центр холста:
|
1 2 |
cX = clock.offsetLeft + clock.width / 2; cY = clock.offsetTop + clock.height /2; |
Помним, что координаты при рисовании считаются от левого верхнего угла, т.е. ось Х направлена слева направо, а ось У — сверху вниз. Радиус циферблата будет равен 150:
|
1 |
R = 150; |
Теперь все для рисования окружности есть:
|
1 2 |
ctx.arc(cX,cY,R,0,Math.PI*2); ctx.stroke(); |
Если мы не стерли шаги с первого урока, то получится следующая картина:
Canvas автоматически продолжил нашу первую линию до начала окружности и все это нарисовал. Что ж, для предотвращения такого в контексте рисования есть специальный метод для начала новой линии — beginPath(), а также можно закончить предыдущую линию, что не обязательно, так как при вызове beginPath делается автоматически — closePath();
Вставим перед arc() метод beginPath() и вот результат:
Для первой версии корпуса достаточно, оборачиваем это в функцию, а константы выносим за нее:
|
1 2 3 4 5 6 7 8 9 |
var cX = clock.offsetLeft + clock.width / 2; var cY = clock.offsetTop + clock.height /2; var R = 150; function drawClockBody(){ ctx.beginPath(); ctx.arc(cX,cY,R,0,Math.PI*2); ctx.stroke(); } |
Сразу же добавим функцию инициализации наших часов, которая и будет вызывать все остальные:
|
1 2 3 |
function init(){ drawClockBody(); } |
Стрелки — это будут линии разной длины от центра к окружности. Чтобы нарисовать их, нам осталось узнать координаты кончиков стрелок, так как первой координтой будет уже известный нам центр окружности. Все координаты стрелок положим в один объект position:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var position = { sec:{ x:null, y:null }, min:{ x:null, y:null }, hrs:{ x:null, y:null } } |
Чтобы посчитать координаты, куда нам нужно рисовать стрелки, необходимо знать время. Для этого создадим объект с датой:
|
1 |
var now = new Data(); |
тогда угол и координаты для секундной стрелки будет следующим:
|
1 2 3 |
angleS = now.getSeconds() * Math.PI/30 - Math.PI/2; position.sec.x = cX + Math.cos(angleS) * R * 0.9; position.sec.y = cY + Math.sin(angleS) * R * 0.9; |
Для рисования стрелки начнем новую линию, перейдем в центр окружности и нарисуем линию по полученным координатам, а также обернем весь этот код в функцию drawSeconds:
|
1 2 3 4 5 6 7 8 9 10 11 |
var now = new Data(); var angleS; function drawSeconds(){ angleS = now.getSeconds() * Math.PI/30 - Math.PI/2; position.sec.x = cX + Math.cos(angleS) * R * 0.9; position.sec.y = cY + Math.sin(angleS) * R * 0.9; ctx.beginPath(); ctx.moveTo(cX,cY); ctx.lineTo(position.sec.x,position.sec.y); ctx.stroke(); } |
Так как функция будет вызываться довольно часто, вынесем во внешнюю переменную текущий угол, чтобы при каждом вызове функции не выделять под него память.
Не забудем добавить вызов drawSeconds() в функцию init(). Теперь при загрузке страницы у нас рисуется не только корпус часов, но и секундная стрелка, которая поворачивается только при перезагрузке страницы. На сегодня все!
Код страницы day2.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html> <head> <title>День 2 - Время уходит...</title> <script src="jquery.js"></script> </head> <body> <canvas id="clock"></canvas> <script> clock.width = 400; clock.height = 400; var ctx = clock.getContext('2d'); cX = clock.offsetLeft + clock.width / 2; cY = clock.offsetTop + clock.height /2; R = 150; var position = { sec:{ x:null, y:null }, min:{ x:null, y:null }, hrs:{ x:null, y:null } } function drawClockBody(){ ctx.beginPath(); ctx.arc(cX,cY,R,0,Math.PI*2); ctx.stroke(); } var now = new Date(); function drawSeconds(){ angleS = now.getSeconds() * Math.PI/30 - Math.PI/2; position.sec.x = cX + Math.cos(angleS) * R * 0.9; position.sec.y = cY + Math.sin(angleS) * R * 0.9; ctx.beginPath(); ctx.moveTo(cX,cY); ctx.lineTo(position.sec.x,position.sec.y); ctx.stroke(); } function init(){ drawClockBody(); drawSeconds(); } init(); </script> </body> </html> |
Оставь комментарий!
2 thoughts on “JS&canvas 2/7 — Начинаем с примитивов”
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Забыл математику, можете пояснить вот эту формулу:
position.sec.x = cX + Math.cos(angleS) * R * 0.9;
В частности, что такое 0.9 ?
Ответ на ваш вопрос в записи за 4 день. К сожалению, поздно увидел ваш комментарий. 0,9 — коэффициент, задающий длину секундной стрелки в сравнении с радиусом корпуса часов.