Relógio

Um relógio apenas com ponteiro dos minutos e segundos, com movimentos discretos. Cada segundo ou minuto corresponde a 6º. A animação tem um período de refrescamento de 1000ms.

As coordenadas do ponteiro dos segundos são atualizadas em cada disparo do relógio (função setInterval). O ponteiro do minutos só é atualizado quando o ponteiro dos segundos tem um ângulo múltiplo de 360º (ang2%360==0).

Visualização:

<!DOCTYPE html>
<html>
<head>
<title>Gráfico</title>
<meta charset="iso-8859-1">
<script type="text/javascript">

var r1 = 150;	// extremidade dos minutos
var p1 = 3600;	// período dos minutos
var r2 = 180;	// extremidade dos segundos
var p2 = 60;	// período dos segundos.

var ang1=0, ang2=0;	// ângulos dos ponteiros no momento atual
var delta1=6, delta2=6;	// incrementos nos ângulos dos ponteiros em
			// cada chamada da função anima()

var x0 = 300;	// coordenadas do centro do relógio - fixas
var y0 = 200;

var ctx;

function init() {
	var c = document.getElementById("cvs");
	ctx = c.getContext("2d");
	larg = eval( c.getAttribute("width") );
	alt = eval( c.getAttribute("height") );
	var periodoRelogio = 1000;
	setInterval("anima()", periodoRelogio);
}

function anima() {
	// Segundos
	ang2 += delta2;
	x2 = r2 * Math.cos((ang2-90)*Math.PI/180) + x0;
	y2 = r2 * Math.sin((ang2-90)*Math.PI/180) + y0;
	// Minutos
	if(ang2 % 360 == 0) ang1 += delta1;
	x1 = r1 * Math.cos((ang1-90)*Math.PI/180) + x0;
	y1 = r1 * Math.sin((ang1-90)*Math.PI/180) + y0;
	// Desenhar
	ctx.fillStyle = "black";
	ctx.beginPath();
	ctx.rect(0,0,larg,alt);
	ctx.fill();

	ctx.fillStyle = "#FFFF20";
	ctx.beginPath();
	ctx.arc(x0,y0,10,0,2*Math.PI);
	ctx.fill();
		
	ctx.fillStyle = "#8080FF";
	ctx.beginPath();
	ctx.arc(x1,y1,5,0,2*Math.PI);
	ctx.fill();
	poeLinha(x0,y0,x1,y1,"#8080FF");
		
	ctx.fillStyle = "white";
	ctx.beginPath();
	ctx.arc(x2,y2,3,0,2*Math.PI);
	ctx.fill();
	poeLinha(x0,y0,x2,y2,"white");
		
}

function poeLinha(x1,y1,x2,y2,cor) {
	ctx.strokeStyle = cor;
	ctx.beginPath();
	ctx.moveTo(x1,y1);
	ctx.lineTo(x2,y2);
	ctx.stroke();
}


</script>


</head>
<body onload="init();">
<canvas width="600" height="400" id="cvs"></canvas>
</body>
</html>

Deixe um comentário Cancelar resposta