Código de JavaScript - Reloj analógico en canvas

Imágen de perfil

Reloj analógico en canvasgráfica de visualizaciones


JavaScript

Publicado el 07 de Marzo del 2018 por xve
3.594 visualizaciones desde el 07 de Marzo del 2018. Una media de 91 por semana
Este código muestra como crear un reloj analógico con canvas

reloj-canvas

Versión 1.0

Actualizado el 08 de Marzo del 2018 (Publicado el 07 de Marzo del 2018)gráfica de visualizaciones de la versión: Versión 1.0
3.595 visualizaciones desde el 07 de Marzo del 2018. Una media de 91 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
</head>
 
<body>
 
<canvas id="canvas" style="width:300px;height:300px;"></canvas>
 
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width=300;
canvas.height=300;
var centerX=canvas.width/2;
var centerY=canvas.height/2;
 
/**
 * Función que dibuja la esfera en la pantalla. Esta función se ejecuta a cada segundo
 */
function dibujarReloj() {
	// limpiamos el canvas entero
	context.clearRect(0, 0, canvas.width, canvas.height);
 
	context.lineWidth=1;
	context.strokeStyle="#000";
 
	// dibujamos el circulo
	context.beginPath();
	context.arc(centerX,centerY,centerX-10,0,2*Math.PI);
	context.stroke();
 
	// dibujamos la linea de los segundos 1, 2, 3, ...
	for(i=0;i<60;i++) {
		var start_x = centerX+Math.round((centerX-15)*Math.cos(6*i*Math.PI/180));
		var start_y = centerY+Math.round((centerY-15)*Math.sin(6*i*Math.PI/180));
		var end_x = centerX+Math.round((centerX-10)*Math.cos(6*i*Math.PI/180));
		var end_y = centerY+Math.round((centerY-10)*Math.sin(6*i*Math.PI/180));
		context.beginPath();
		context.moveTo(start_x,start_y);
		context.lineTo(end_x,end_y);
		context.stroke();
	}
 
	context.lineWidth=2;
	// dibujamos la linea de los minutos 5, 10, 15, ...
	for(i=0;i<12;i++) {
		var start_x = centerX+Math.round((centerX-30)*Math.cos(30*i*Math.PI/180));
		var start_y = centerY+Math.round((centerY-30)*Math.sin(30*i*Math.PI/180));
		var end_x = centerX+Math.round((centerX-10)*Math.cos(30*i*Math.PI/180));
		var end_y = centerY+Math.round((centerY-10)*Math.sin(30*i*Math.PI/180));
		context.beginPath();
		context.moveTo(start_x,start_y);
		context.lineTo(end_x,end_y);
		context.stroke();
	}
 
	// Mostramos el texto en el centro del reloj
	context.font = "14px sans-serif";
	context.textAlign = "center";
	context.fillStyle = "blue";
	context.fillText("LaWebDelProgramador.com", canvas.width/2, (canvas.height/2)+30);
}
 
/**
 * Función que se ejecuta cada segundo para actualizar el reloj
 */
function actualizarReloj() {
	dibujarReloj();
	var now = new Date();
	var hours = now.getHours();
	var minutes = now.getMinutes();
	var seconds = now.getSeconds();
 
	dibujarAguja(seconds, (centerX-20),1,"red");
	dibujarAguja(minutes, (centerX-35),3,"black");
	dibujarAguja(hours*5,  (centerX-60),5,"grey");
}
 
/**
 * Función para dibujar las agujas del reloj
 * @param int valor		- determina el valor de la aguja a mostrar en el reloj
 * @param int logitud	- define la longitud de la aguja
 * @param int grueso	- define el grueso de la aguja
 * @param string color	- cadena con el color de la aguja en formato HTML
 */
function dibujarAguja(valor,longitud, grueso, color) {
	angle = ((Math.PI * 2) * (valor / 60)) - ((Math.PI * 2) / 4);
 
	var end_x = centerX+Math.cos(angle)*longitud;
	var end_y = centerY+Math.sin(angle)*longitud;
 
	context.beginPath();
	context.lineWidth=grueso;
	context.strokeStyle=color;
	context.moveTo(centerX,centerY);
	context.lineTo(end_x,end_y);
	context.stroke();
}
 
actualizarReloj();
setInterval("actualizarReloj()",1000);
</script>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (0)


No hay comentarios
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4475  
Revisar política de publicidad