Ako vytvoriť analógové hodiny pomocou HTML5 Canvas?

Vytvorenie analógových hodín pomocou plátna HTML5 zahŕňa nasledujúce kroky:

1. Vytvorte plátno:

– Začnite vytvorením prvku plátna HTML5. Môžete to urobiť pridaním nasledujúceho kódu do dokumentu HTML:

```html

```

2. Získajte kontext plátna:

- Ďalej musíte získať kontext plátna, ktorý vám umožní kresliť na plátno. Môžete na to použiť metódu `getContext()`.

```javascript

var canvas =document.getElementById("hodiny");

var ctx =canvas.getContext("2d");

```

3. Nakreslite ciferník:

- Začnite kresliť ciferník nastavením štýlu výplne a šírky čiary. Potom nakreslite kruh pre ciferník hodín.

```javascript

// Nastavte štýl výplne a šírku čiary

ctx.fillStyle ="biela";

ctx.strokeStyle ="čierna";

ctx.lineWidth =10;

// Nakreslite ciferník hodín

ctx.beginPath();

ctx.arc(200, 200, 150, 0, 2 * Math.PI);

ctx.fill();

ctx.stroke();

```

4. Pridať čísla hodín:

- Ďalej musíte pridať čísla okolo ciferníka hodín. Môžete to urobiť pomocou metódy `fillText()`.

```javascript

// Nastavte písmo a zarovnanie textu

ctx.font ="bold 20px Arial";

ctx.textAlign ="stred";

// Pridajte čísla hodín

for (var i =1; i <=12; i++) {

var uhol =(i * 30) * Math.PI / 180;

var x =200 + Math.cos(uhol) * 130;

var y =200 + Math.sin(uhol) * 130;

ctx.fillText(i, x, y);

}

```

5. Nakresliť ručičky hodín:

- Ak chcete nakresliť ručičky hodín, musíte vypočítať uhly a dĺžky na základe aktuálneho času.

```javascript

// Získanie aktuálneho času

var date =new Date();

var hodiny =date.getHours();

var minúty =date.getMinutes();

var sekund =date.getSeconds();

// Vypočítajte uhly a dĺžky rúk

var hourAngle =(hodiny % 12 + minúty / 60) * 30 * Math.PI / 180;

var minuteAngle =(minúty + sekundy / 60) * 6 * Math.PI / 180;

var secondAngle =(sekundy) * 6 * Math.PI / 180;

var hourHandLength =80;

var minuteHandLength =120;

var secondHandLength =140;

// Nakreslite hodinovú ručičku

ctx.beginPath();

ctx.moveTo(200, 200);

ctx.lineTo(

200 + Math.cos(hourAngle) * hourHandLength,

200 + Math.sin(hourAngle) * hourHandLength

);

ctx.stroke();

// Nakreslite minútovú ručičku

ctx.beginPath();

ctx.moveTo(200, 200);

ctx.lineTo(

200 + Math.cos (minuteAngle) * minuteHandLength,

200 + Math.sin(minuteAngle) * minuteHandLength

);

ctx.stroke();

// Nakreslite druhú ručičku

ctx.beginPath();

ctx.moveTo(200, 200);

ctx.lineTo(

200 + Math.cos (secondAngle) * secondHandLength,

200 + Math.sin(secondAngle) * secondHandLength

);

ctx.stroke();

```

6. Animácia hodín:

- Ak chcete animovať hodiny, môžete použiť funkciu `setInterval()` na aktualizáciu polohy ručičiek na hodinách každú sekundu.

```javascript

// Aktualizujte hodiny každú sekundu

setInterval(function() {

// Získanie aktuálneho času

var date =new Date();

var hodiny =date.getHours();

var minúty =date.getMinutes();

var sekund =date.getSeconds();

// Vypočítajte uhly a dĺžky rúk

var hourAngle =(hodiny % 12 + minúty / 60) * 30 * Math.PI / 180;

var minuteAngle =(minúty + sekundy / 60) * 6 * Math.PI / 180;

var secondAngle =(sekundy) * 6 * Math.PI / 180;

// Nakreslite ručičky hodín

ctx.clearRect(0, 0, 400, 400); // Vyčistite plátno

drawClockFace(); // Nakreslite ciferník hodín

addClockNumbers(); // Pridajte čísla hodín

drawClockHands(hourAngle, minuteAngle, secondAngle); // Nakreslite ručičky hodín

}, 1000); // Aktualizácia hodín každých 1000 milisekúnd (1 sekunda)

```

Tento kód vytvorí funkčné analógové hodiny, ktoré sa aktualizujú v reálnom čase. Farby ciferníka, písma a dĺžky ručičiek si môžete prispôsobiť a vytvoriť tak rôzne vzory.

• Predchádzajúca strana: Ako odstrániť pozadie z obrázkov? 
• Ďalšia strana: Ako automaticky prispôsobiť šírku buniek v pracovnom hárku programu Excel?