TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda analoginen kello HTML5 -kankaalla?

27

HTML5 Canvas -elementtiä käytetään JavaScriptillä piirretyn grafiikan säilyttämiseen. Canvas -tagia käytetään vain elementin pitämiseen paikkamerkkinä tai säilönä. Varsinainen grafiikka piirretään JavaScriptillä. Tässä artikkelissa piirrämme yksinkertaisen analogisen kellon JavaScriptiä käyttäen ja sijoitamme sen sivulle, jossa on Canvas -säilö.

Aiheeseen liittyviä: Kuinka luoda pyörivä kuutio -widget CSS: llä?

Analoginen kello HTML5 -kankaalla ja JavaScriptillä

Tämä on yksinkertainen kello -widget, jossa on tunteja, minuutteja ja sekunteja. Aika alkaa tietokoneen ajan mukaan, kun widget ladataan. Tässä on demo siitä, miltä kello näyttää:

Analogisessa kello -widgetissä on kaksi osaa – JavaScript ja Canvas -säilö.

Analogisen kellon JavaScript

JavaScriptiä käytetään ympyrän, osoittimien, kellonajan ja osoitinliikkeiden luomiseen alla kuvatulla tavalla. Matemaattisia laskelmia käytetään jakamaan ympyrän 360 astetta, jotta osoittimet pyörivät oikein.

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

Voit käyttää tätä komentosarjaa sivulla… -koodeilla koodin mukaisesti. Muussa tapauksessa luo .js -tiedosto ja lisää sisältö ilman komentosarjatunnisteita ja linkitä komentotiedosto sivun alatunnisteeseen koodilla <script src = "script.js">.

Analogisen kellon HTML

Alla on analogisen kellon HTML -koodi kangassäiliön luomiseksi. Voit liittää tämän koodin mihin tahansa sivullesi.

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

Widgetin mukauttaminen

Analoginen kello voidaan mukauttaa seuraavilla vaihtoehdoilla:

  • Muuta tuntien, minuuttien ja sekuntien osoittimien väri ja pituus mihin tahansa vaadittuun arvoon, joka on määritetty drawPointer -toiminnolla.
  • Muuta parametrilla "ctx.font =" 26px Verdana "määriteltyjen numeroiden kokoa ja kirjasinta."
  • Kellon sisällä olevien numeroiden väri määritellään ruskeaksi käyttämällä "ctx.fillStyle =" ruskea ";" joka voidaan vaihtaa mihin tahansa väriin.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja