TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo crear un reloj analógico con HTML5 Canvas?

0

El elemento Canvas HTML5 se utiliza para contener los gráficos dibujados con JavaScript. La etiqueta de lienzo solo se usa para contener el elemento como marcador de posición o contenedor. Los gráficos reales se dibujan con JavaScript. En este artículo dibujaremos un reloj analógico simple usando JavaScript y lo colocaremos en una página con contenedor Canvas.

Relacionado: ¿Cómo crear un widget de cubo giratorio con CSS?

Reloj analógico con HTML5 Canvas y JavaScript

Este es un widget de reloj simple con punteros de horas, minutos y segundos. La hora comenzará según la hora de su computadora cuando se cargue el widget. Aquí hay una demostración de cómo se verá el reloj:

Hay dos partes en el widget de reloj analógico: JavaScript y el contenedor Canvas.

JavaScript para reloj analógico

JavaScript se utiliza para crear un círculo, punteros, la hora del reloj y los movimientos del puntero como se muestra a continuación. Los cálculos matemáticos se utilizan para dividir los 360 grados del círculo para que los punteros giren adecuadamente.

<script type="text/JavaScript"> x=150; y=150; clock=document.getElementById("canvas"); ctx=clock.getContext("2d"); function loop() { time=new Date(); h=time.getHours(); m=time.getMinutes(); s=time.getSeconds(); ctx.beginPath(); ctx.fillStyle="white"; ctx.arc(x,y,140,0,Math.PI*2,true); ctx.fill(); ctx.strokeStyle="red"; ctx.lineWidth=10; ctx.stroke(); drawNumber(); drawPointer(360*(h/12)+(m/60)*30-90,70,"black",10); drawPointer(360*(m/60)+(s/60)*6-90,100,"black",10); drawPointer(360*(s/60)+x-90,120,"red",2); } function drawNumber() { for(n=0;n<12;n++) { d=-60; num = new Number(n+1); str = num.toString(); dd = Math.PI/180*(d+n*30); tx = Math.cos(dd)*120+140; ty = Math.sin(dd)*120+160; ctx.font = "26px Verdana"; ctx.fillStyle = "brown"; ctx.fillText(str, tx, ty); } } function drawPointer(deg,len,color,w) { rad=(Math.PI/180*deg); x1=x+Math.cos(rad)*len; y1=y+Math.sin(rad)*len; ctx.beginPath(); ctx.strokeStyle=color; ctx.lineWidth=w; ctx.moveTo(x,y); ctx.lineTo(x1,y1); ctx.stroke(); } setInterval(loop,500); </script>

Puede utilizar esta secuencia de comandos en la página con … etiquetas como se indica en el código. De lo contrario, cree un archivo .js y agregue el contenido sin etiquetas de secuencia de comandos y vincule el archivo de secuencia de comandos en la sección de pie de página de la página utilizando el código <script src = "script.js">.

HTML para reloj analógico

A continuación se muestra el código HTML del reloj analógico para crear un contenedor de lienzo. Puede pegar este código en cualquier lugar de su página.

<center> <canvas id="canvas" width="300" height="300"></canvas> </center>

Personalización del widget

El reloj analógico se puede personalizar con las siguientes opciones:

  • Cambie el color y la longitud de los punteros de horas, minutos y segundos a cualquier valor requerido definido mediante la función drawPointer.
  • Cambie el tamaño y la fuente de los números definidos con “ctx.font =” 26px Verdana ";”.
  • El color de los números dentro del reloj se define como marrón usando "ctx.fillStyle =" brown ";" que se puede cambiar a cualquier color.

Fuente de grabación: webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More