Авторизация

Я в деле!

Средний

7 уроков

Курс

JS & canvas

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

JS&canvas 2/7 — Начинаем с примитивов

Октября

2013

Автор урока:

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

комментария

лайков

Пора переходить к делу. Ведь время идет, а часов, чтобы посмотреть ему вслед, все еще нет. Нужно срочно исправлять ситуацию!

День 2.

Чтобы упростить дальнейшую разработку и доработку плагина, разобьем логику рисования часов на несколько блоков:

Рисование самих часов, их корпус.
Рисование циферблата.
Рисование секундной стрелки.
Рисование минутной стрелки.
Рисование часовой стрелки.

Для начала сделаем корпус часов. Для этого воспользуемся методом arc(), который рисует дугу окружности. На вход этот метод принимает координаты центра окружности, радиус окружности, а также градусы ограничения дуги. Чтобы нарисовать полную окружность, мы ограничим дугу значением 2*PI. Также нам понадобятся координаты центра окружности — возьмем центр холста:

cX = clock.offsetLeft + clock.width / 2;
cY = clock.offsetTop + clock.height /2;

1 2	cX = clock.offsetLeft + clock.width / 2; cY = clock.offsetTop + clock.height /2;

Помним, что координаты при рисовании считаются от левого верхнего угла, т.е. ось Х направлена слева направо, а ось У — сверху вниз. Радиус циферблата будет равен 150:

R = 150;

R = 150;

Теперь все для рисования окружности есть:

ctx.arc(cX,cY,R,0,Math.PI*2);
ctx.stroke();

1 2	ctx.arc(cX,cY,R,0,Math.PI*2); ctx.stroke();

Если мы не стерли шаги с первого урока, то получится следующая картина:

Day2_0

Canvas автоматически продолжил нашу первую линию до начала окружности и все это нарисовал. Что ж, для предотвращения такого в контексте рисования есть специальный метод для начала новой линии — beginPath(), а также можно закончить предыдущую линию, что не обязательно, так как при вызове beginPath делается автоматически — closePath();

Вставим перед arc() метод beginPath() и вот результат:

Day2_1

Для первой версии корпуса достаточно, оборачиваем это в функцию, а константы выносим за нее:

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();
}

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();

}

Сразу же добавим функцию инициализации наших часов, которая и будет вызывать все остальные:

function init(){
	drawClockBody();
}

function init(){

drawClockBody();

}

Стрелки — это будут линии разной длины от центра к окружности. Чтобы нарисовать их, нам осталось узнать координаты кончиков стрелок, так как первой координтой будет уже известный нам центр окружности. Все координаты стрелок положим в один объект position:

var position = {
	sec:{
		x:null,
		y:null
	},
	min:{
		x:null,
		y:null
	},
	hrs:{
		x:null,
		y:null
	}
}

var position = {

sec:{

x:null,

y:null

min:{

x:null,

y:null

hrs:{

x:null,

y:null

}

Чтобы посчитать координаты, куда нам нужно рисовать стрелки, необходимо знать время. Для этого создадим объект с датой:

var now = new Data();

1	var now = new Data();

тогда угол и координаты для секундной стрелки будет следующим:

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;

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:

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();
}

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

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

<!DOCTYPE html>

<html>

<head>

<title>День 2 - Время уходит...</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 init(){

drawClockBody();

drawSeconds();

}

init();

</script>

</body>

</html>

canvas html5 JavaScript

Делись:

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

2 thoughts on “JS&canvas 2/7 — Начинаем с примитивов”

daniladaniladanila:

09.10.2013 в 21:26

Забыл математику, можете пояснить вот эту формулу:

position.sec.x = cX + Math.cos(angleS) * R * 0.9;

В частности, что такое 0.9 ?

Войдите, чтобы ответить
1. Roman Spiridonov:
  
  11.10.2013 в 12:43
  
  Ответ на ваш вопрос в записи за 4 день. К сожалению, поздно увидел ваш комментарий. 0,9 — коэффициент, задающий длину секундной стрелки в сравнении с радиусом корпуса часов.
  
  Войдите, чтобы ответить

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

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