Å lage en analog klokke med HTML5-lerret innebærer følgende trinn:
1. Lag et lerret:
- Start med å lage et HTML5-lerretselement. Du kan gjøre dette ved å legge til følgende kode i HTML-dokumentet:
```html
```
2. Få Canvas-konteksten:
– Deretter må du få lerretskonteksten, som lar deg tegne på lerretet. Du kan bruke `getContext()`-metoden for å gjøre det.
```javascript
var canvas =document.getElementById("klokke");
var ctx =canvas.getContext("2d");
```
3. Tegn urskiven:
- Begynn å tegne urskiven ved å stille inn fyllstilen og linjebredden. Tegn deretter en sirkel for urskiven.
```javascript
// Angi fyllstilen og linjebredden
ctx.fillStyle ="hvit";
ctx.strokeStyle ="svart";
ctx.lineWidth =10;
// Tegn urskiven
ctx.beginPath();
ctx.arc(200, 200, 150, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
```
4. Legg til klokkenummer:
- Deretter må du legge til tall døgnet rundt. Du kan gjøre dette ved å bruke `fillText()`-metoden.
```javascript
// Angi skrifttype og tekstjustering
ctx.font ="fet 20px Arial";
ctx.textAlign ="senter";
// Legg til klokketallene
for (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.fillTekst(i, x, y);
}
```
5. Tegn klokkevisere:
- For å tegne klokkeviserne må du beregne vinklene og lengdene basert på gjeldende tid.
```javascript
// Få gjeldende tid
var dato =ny dato();
var timer =date.getHours();
var minutter =date.getMinutes();
var sekunder =date.getSeconds();
// Regn ut vinklene og lengdene på hendene
var hourAngle =(timer % 12 + minutter / 60) * 30 * Math.PI / 180;
var minuteAngle =(minutter + sekunder / 60) * 6 * Math.PI / 180;
var secondAngle =(sekunder) * 6 * Math.PI / 180;
var hourHandLength =80;
var minuteHandLength =120;
var secondHandLength =140;
// Tegn timeviseren
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(hourAngle) * hourHandLength,
200 + Math.sin(hourAngle) * timeHandLength
);
ctx.stroke();
// Tegn minuttviseren
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(minuteAngle) * minuteHandLength,
200 + Math.sin(minuteAngle) * minuteHandLength
);
ctx.stroke();
// Tegn sekundviseren
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(secondAngle) * secondHandLength,
200 + Math.sin(secondAngle) * secondHandLength
);
ctx.stroke();
```
6. Animer klokken:
- For å animere klokken, kan du bruke `setInterval()`-funksjonen for å oppdatere klokkeviserens posisjoner hvert sekund.
```javascript
// Oppdater klokken hvert sekund
setInterval(function() {
// Få gjeldende tid
var dato =ny dato();
var timer =date.getHours();
var minutter =date.getMinutes();
var sekunder =date.getSeconds();
// Regn ut vinklene og lengdene på hendene
var hourAngle =(timer % 12 + minutter / 60) * 30 * Math.PI / 180;
var minuteAngle =(minutter + sekunder / 60) * 6 * Math.PI / 180;
var secondAngle =(sekunder) * 6 * Math.PI / 180;
// Tegn klokkeviserne
ctx.clearRect(0, 0, 400, 400); // Tøm lerretet
drawClockFace(); // Tegn urskiven
addClockNumbers(); // Legg til klokketall
drawClockHands(hourAngle, minuteAngle, secondAngle); // Tegn klokkeviserne
}, 1000); // Oppdater klokken hvert 1000. millisekund (1 sekund)
```
Denne koden vil lage en funksjonell analog klokke som oppdateres i sanntid. Du kan tilpasse urskivens farger, fonter og viserlengder for å lage forskjellige design.
