Códigos HTML y CSS del cronómetro animado
El código html
El código HTML de este proycto es sumamente simple: se crea un elemento canvas con el estilo que deseemos
El estilo es totalmente libre y se puede especificar mediante reglas CSS.
Dada la simplicdad del código en este caso usamos los estilos en la propia página web. Si vas a usar estilos más complejos y mas reglas, es mejor usar un archivo externo.
En este caso usaremos un canvas de ancho y alto 600 px (colocados con los atrinbutos del canvas) y centramos en la página en horizontal.
Para otras disposiciones puedes usar el habitual flex o grid o la forma en que seemos que aparezca en la página.
Además tenemos que colocar el enlace al script que va a gestionar todo el funcionamiento del cronómetro.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cronómetro analógico</title>
<style>
#cronometro {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="cronometro" width="600" height="600"></canvas>
<script type="text/javascript" src="cronometro.js"></script>
</body>
</html>
En el elemento canvas definimos los atributos de alto (height) y ancho (width), estos valores los utilizará el script para dibujar el cronómetro.