Авторизация

Я в деле!

Средний

7 уроков

Курс

JS & canvas

В этом курсе, состоящим из 7 статей Роман Спиридонов познакомит вас с canvas.

JS&canvas 3/7 — Анимация стрелок

Октября

2013

Автор урока:

Роман Спиридонов

комментариев

лайков

Сегодня сделаем первые шаги в анимации canvas. Рисуем двигающиеся стрелки часов.

День 3

Аналогично методу drawSeconds в предыдущем дне создаем методы для минутной и часовой стрелок (drawMinutes, drawHours):

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 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, который принимает на вход координаты верхней левой точки прямоугольника, а также его ширину и высоту, тогда при вызове со следующими аргументами он очистит весь холст:

ctx.clearRect(0, 0, clock.width, clock.height);

1	ctx.clearRect(0, 0, clock.width, clock.height);

после чего можно снова рисовать стрелки и часы, при этом не забываем обновить текущее время для отображения наших часов:

function update(){
	ctx.clearRect(0, 0, clock.width, clock.height);
	drawClockBody();
	now = new Date();
	drawSeconds();
	drawMinutes();
	drawHours();
}

function update(){

ctx.clearRect(0, 0, clock.width, clock.height);

drawClockBody();

now = new Date();

drawSeconds();

drawMinutes();

drawHours();

}

Функция обновления отображения времени готова. Осталось ее запустить должным образом, а для этого меняем метод инициализации часов:

function init(){
	setInterval(update,1000);
}

function init(){

setInterval(update,1000);

}

Который теперь будет вызывать функцию update каждую секунду и каждую секунду наши часы будут перерисовываться.

Теперь у нас есть часы, которые ходят и показывают текущее время, но это еще вовсе не конец, а только середина нашего пути по разработке часиков и работе с canvas.

Код страницы day3.html

<!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>

<!DOCTYPE html>

<html>

<head>

<title>День 3 - А стрелки то бегут</title>

</head>

<body>

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>

canvas html5 JavaScript

Материалы к уроку:

Делись:

Оставь комментарий!

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.