Kuinka luoda analoginen kello HTML5 -kankaalla?

Viimeisin päivitys syys 15, 2021

Sisältö

Analoginen kello HTML5 -kankaalla ja JavaScriptillä

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.

: webnots.com