JS&canvas 3/7 — Анимация стрелок
Сегодня сделаем первые шаги в анимации canvas. Рисуем двигающиеся стрелки часов.
День 3
Аналогично методу drawSeconds в предыдущем дне создаем методы для минутной и часовой стрелок (drawMinutes, drawHours):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function drawMinutes(){ angleM = now.getMinutes() * Math.PI/30 - Math.PI/2; position.min.x = cX + Math.cos(angleM) * R * 0.6; position.min.y = cY + Math.sin(angleM) * R * 0.6; ctx.beginPath(); ctx.moveTo(cX,cY); ctx.lineTo(position.min.x,position.min.y); ctx.stroke(); } function drawHours(){ angleH = now.getHours() * Math.PI/6 - Math.PI/2; position.hrs.x = cX + Math.cos(angleH) * R * 0.3; position.hrs.y = cY + Math.sin(angleH) * R * 0.3; ctx.beginPath(); ctx.moveTo(cX,cY); ctx.lineTo(position.hrs.x,position.hrs.y); ctx.stroke(); } |
Но добавлять их в метод инициализации не будем, так как это приведет всего лишь к однократному их вызову. А нам ведь нужно, чтобы они перерисовывались в соответствии с текущим временем. Как это сделать? Есть несколько способов. Возьмем простейший — перерисовать все полностью. Создадим метод update(), который и будет этим заниматься. Первое, что он будет делать — очищать холст с помощью метода clearRect, который принимает на вход координаты верхней левой точки прямоугольника, а также его ширину и высоту, тогда при вызове со следующими аргументами он очистит весь холст:
|
1 |
ctx.clearRect(0, 0, clock.width, clock.height); |
после чего можно снова рисовать стрелки и часы, при этом не забываем обновить текущее время для отображения наших часов:
|
1 2 3 4 5 6 7 8 |
function update(){ ctx.clearRect(0, 0, clock.width, clock.height); drawClockBody(); now = new Date(); drawSeconds(); drawMinutes(); drawHours(); } |
Функция обновления отображения времени готова. Осталось ее запустить должным образом, а для этого меняем метод инициализации часов:
|
1 2 3 |
function init(){ setInterval(update,1000); } |
Который теперь будет вызывать функцию update каждую секунду и каждую секунду наши часы будут перерисовываться.
Теперь у нас есть часы, которые ходят и показывают текущее время, но это еще вовсе не конец, а только середина нашего пути по разработке часиков и работе с canvas.
Код страницы day3.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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
<!DOCTYPE html> <html> <head> <title>День 3 - А стрелки то бегут</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 drawMinutes(){ angleM = now.getMinutes() * Math.PI/30 - Math.PI/2; position.min.x = cX + Math.cos(angleM) * R * 0.6; position.min.y = cY + Math.sin(angleM) * R * 0.6; ctx.beginPath(); ctx.moveTo(cX,cY); ctx.lineTo(position.min.x,position.min.y); ctx.stroke(); } function drawHours(){ angleH = now.getHours() * Math.PI/6 - Math.PI/2; position.hrs.x = cX + Math.cos(angleH) * R * 0.3; position.hrs.y = cY + Math.sin(angleH) * R * 0.3; ctx.beginPath(); ctx.moveTo(cX,cY); ctx.lineTo(position.hrs.x,position.hrs.y); ctx.stroke(); } function init(){ setInterval(update,1000); } function update(){ ctx.clearRect(0, 0, clock.width, clock.height); now = new Date(); drawClockBody(); drawSeconds(); drawMinutes(); drawHours(); } init(); </script> </body> </html> |
Оставь комментарий!