TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage en analog klokke med HTML5 lerret?

2

HTML5 Canvas -element brukes til å holde grafikken tegnet med JavaScript. Canvas -tag brukes bare til å holde elementet som en plassholder eller beholder. Selve grafikken er tegnet med JavaScript. I denne artikkelen vil vi tegne en enkel analog klokke ved hjelp av JavaScript og plassere den på en side med Canvas -beholder.

Relatert: Hvordan lage en roterende kube -widget med CSS?

Analog klokke med HTML5 Canvas og JavaScript

Dette er en enkel klokke -widget med timer, minutter og sekunder. Tiden starter i henhold til datamaskinens tid når widgeten er lastet inn. Her er en demonstrasjon av hvordan klokken vil se ut:

Det er to deler i den analoge klokke -widgeten – JavaScript og Canvas -beholder.

JavaScript for analog klokke

JavaScript brukes til å lage en sirkel, pekere, klokke tid og pekerbevegelser som vist nedenfor. Matematiske beregninger brukes til å dele 360 ​​grader av sirkelen for at pekene skal rotere riktig.

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

Du kan bruke dette skriptet på siden med … tagger som angitt i koden. Ellers kan du opprette en .js -fil og legge til innholdet uten skriptkoder, og koble skriptfilen til bunnteksten på siden ved å bruke koden <script src = "script.js">.

HTML for analog klokke

Nedenfor er HTML for den analoge klokken for å lage lerretbeholder. Du kan lime inn denne koden hvor som helst på siden din.

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

Tilpasse widgeten

Den analoge klokken kan tilpasses med følgende alternativer:

  • Endre timers, minutter og sekunders pekere farge og lengde til en hvilken som helst ønsket verdi definert ved hjelp av drawPointer -funksjonen.
  • Endre størrelsen og skriften på tallene definert med "ctx.font =" 26px Verdana ";".
  • Fargen på tallene inne i klokken er definert som brun ved bruk av "ctx.fillStyle =" brun ";" som kan endres til hvilken som helst farge.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon