Att skapa en analog klocka med HTML5-duk innebär följande steg:
1. Skapa en canvas:
- Börja med att skapa ett HTML5 canvaselement. Du kan göra detta genom att lägga till följande kod i ditt HTML-dokument:
```html
```
2. Hämta Canvas-kontexten:
- Därefter måste du få tag i dukens sammanhang, vilket gör att du kan rita på duken. Du kan använda metoden `getContext()` för att göra det.
```javascript
var canvas =document.getElementById("klocka");
var ctx =canvas.getContext("2d");
```
3. Rita urtavlan:
- Börja rita urtavlan genom att ställa in fyllningsstilen och linjebredden. Rita sedan en cirkel för urtavlan.
```javascript
// Ställ in fyllningsstil och linjebredd
ctx.fillStyle ="vit";
ctx.strokeStyle ="svart";
ctx.lineWidth =10;
// Rita urtavlan
ctx.beginPath();
ctx.arc(200, 200, 150, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
```
4. Lägg till klocknummer:
- Därefter måste du lägga till siffror dygnet runt. Du kan göra detta genom att använda metoden `fillText()`.
```javascript
// Ställ in teckensnitt och textjustering
ctx.font ="fet 20px Arial";
ctx.textAlign ="center";
// Lägg till klocksiffrorna
för (var i =1; i <=12; i++) {
var vinkel =(i * 30) * Math.PI / 180;
var x =200 + Math.cos(angle) * 130;
var y =200 + Math.sin(vinkel) * 130;
ctx.fillText(i, x, y);
}
```
5. Rita klockvisare:
- För att rita klockvisarna måste du beräkna vinklarna och längderna baserat på den aktuella tiden.
```javascript
// Hämta aktuell tid
var date =new Date();
var timmar =date.getHours();
var minuter =date.getMinutes();
var sekunder =date.getSeconds();
// Beräkna vinklarna och längderna på händerna
var hourAngle =(timmar % 12 + minuter / 60) * 30 * Math.PI / 180;
var minuteAngle =(minuter + sekunder / 60) * 6 * Math.PI / 180;
var secondAngle =(sekunder) * 6 * Math.PI / 180;
var hourHandLength =80;
var minuteHandLength =120;
var secondHandLength =140;
// Rita timvisaren
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(hourAngle) * hourHandLength,
200 + Math.sin(hourAngle) * hourHandLength
);
ctx.stroke();
// Rita minutvisaren
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(minuteAngle) * minuteHandLength,
200 + Math.sin(minuteAngle) * minuteHandLength
);
ctx.stroke();
// Rita sekundvisaren
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(secondAngle) * secondHandLength,
200 + Math.sin(secondAngle) * secondHandLength
);
ctx.stroke();
```
6. Animera klockan:
- För att animera klockan kan du använda funktionen `setInterval()` för att uppdatera klockvisarnas positioner varje sekund.
```javascript
// Uppdatera klockan varje sekund
setInterval(function() {
// Hämta aktuell tid
var date =new Date();
var timmar =date.getHours();
var minuter =date.getMinutes();
var sekunder =date.getSeconds();
// Beräkna vinklarna och längderna på händerna
var hourAngle =(timmar % 12 + minuter / 60) * 30 * Math.PI / 180;
var minuteAngle =(minuter + sekunder / 60) * 6 * Math.PI / 180;
var secondAngle =(sekunder) * 6 * Math.PI / 180;
// Rita klockvisarna
ctx.clearRect(0, 0, 400, 400); // Rensa duken
drawClockFace(); // Rita urtavlan
addClockNumbers(); // Lägg till klocknummer
drawClockHands(hourAngle, minuteAngle, secondAngle); // Rita klockvisarna
}, 1000); // Uppdatera klockan var 1000:e millisekund (1 sekund)
```
Denna kod kommer att skapa en funktionell analog klocka som uppdateras i realtid. Du kan anpassa urtavlans färger, typsnitt och visarlängder för att skapa olika design.
