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

Imágen de perfil
Val: 2.720
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Reloj analógico en canvasgráfica de visualizaciones


JavaScript

Publicado el 7 de Marzo del 2018 por Xve (285 códigos)
13.399 visualizaciones desde el 7 de Marzo del 2018
Este código muestra como crear un reloj analógico con canvas

reloj-canvas

Versión 1.0

Publicado el 7 de Marzo del 2018gráfica de visualizaciones de la versión: Versión 1.0
13.400 visualizaciones desde el 7 de Marzo del 2018
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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s4475