TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare un orologio analogico con Canvas HTML5?

148

L’ elemento HTML5 Canvas viene utilizzato per contenere la grafica disegnata con JavaScript. Il tag Canvas viene utilizzato solo per contenere l’elemento come segnaposto o contenitore. La grafica attuale è disegnata con JavaScript. In questo articolo disegneremo un semplice orologio analogico usando JavaScript e lo collocheremo su una pagina con il contenitore Canvas.

Correlati: come creare un widget cubo rotante con CSS?

Orologio analogico con tela HTML5 e JavaScript

Questo è un semplice widget orologio con puntatori di ore, minuti e secondi. L’ora inizierà in base all’ora del tuo computer quando il widget viene caricato. Ecco una demo di come sarà l’orologio:

Ci sono due parti nel widget dell’orologio analogico: JavaScript e il contenitore Canvas.

JavaScript per orologio analogico

JavaScript viene utilizzato per creare un cerchio, puntatori, ora dell’orologio e movimenti del puntatore come di seguito. I calcoli matematici vengono utilizzati per dividere i 360 gradi del cerchio affinché i puntatori ruotino in modo appropriato.

<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>

Puoi usare questo script nella pagina con i tag … come indicato nel codice. Altrimenti crea un file .js e aggiungi il contenuto senza tag di script e collega il file di script nella sezione piè di pagina della pagina utilizzando il codice <script src="script.js">.

HTML per orologio analogico

Di seguito è riportato l’HTML per l’orologio analogico per creare un contenitore di tela. Puoi incollare questo codice ovunque nella tua pagina.

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

Personalizzazione del widget

L’orologio analogico può essere personalizzato con le seguenti opzioni:

  • Modificare il colore e la lunghezza dei puntatori di ore, minuti e secondi in qualsiasi valore richiesto definito utilizzando la funzione drawPointer.
  • Modificare la dimensione e il carattere dei numeri definiti con “ctx.font = “26px Verdana";”.
  • Il colore dei numeri all’interno dell’orologio è definito marrone usando “ctx.fillStyle = “brown”;” che può essere cambiato in qualsiasi colore.

Fonte di registrazione: www.webnots.com
Lascia una risposta

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