Oprettelse af et analogt ur med HTML5-lærred involverer følgende trin:
1. Opret et lærred:
- Start med at oprette et HTML5-lærredselement. Du kan gøre dette ved at tilføje følgende kode til dit HTML-dokument:
```html
```
2. Få Canvas-konteksten:
- Dernæst skal du have lærredskonteksten, som giver dig mulighed for at tegne på lærredet. Du kan bruge `getContext()`-metoden til at gøre det.
```javascript
var canvas =document.getElementById("ur");
var ctx =canvas.getContext("2d");
```
3. Tegn urskiven:
- Begynd at tegne urskiven ved at indstille fyldstilen og linjebredden. Tegn derefter en cirkel til urskiven.
```javascript
// Indstil fyldstilen og linjebredden
ctx.fillStyle ="hvid";
ctx.strokeStyle ="sort";
ctx.lineWidth =10;
// Tegn urskiven
ctx.beginPath();
ctx.arc(200, 200, 150, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
```
4. Tilføj urnumre:
- Dernæst skal du tilføje tal døgnet rundt. Du kan gøre dette ved at bruge `fillText()`-metoden.
```javascript
// Indstil skrifttype og tekstjustering
ctx.font ="fed 20px Arial";
ctx.textAlign ="center";
// Tilføj urtallene
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.fillText(i, x, y);
}
```
5. Tegn ur visere:
- For at tegne urviserne skal du beregne vinkler og længder baseret på det aktuelle tidspunkt.
```javascript
// Få det aktuelle tidspunkt
var dato =ny dato();
var timer =date.getHours();
var minutter =date.getMinutes();
var sekunder =date.getSeconds();
// Beregn hændernes vinkler og længder
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 timeHandLength =80;
var minutHandLength =120;
var secondHandLength =140;
// Tegn timeviseren
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(hourAngle) * timeHandLength,
200 + Math.sin(hourAngle) * timeHandLength
);
ctx.stroke();
// Tegn minutviseren
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(minuteAngle) * minuteHandLength,
200 + Math.sin(minuteAngle) * minutHandLength
);
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 uret:
- For at animere uret kan du bruge `setInterval()`-funktionen til at opdatere urvisernes positioner hvert sekund.
```javascript
// Opdater uret hvert sekund
sætinterval(funktion() {
// Få det aktuelle tidspunkt
var dato =ny dato();
var timer =date.getHours();
var minutter =date.getMinutes();
var sekunder =date.getSeconds();
// Beregn hændernes vinkler og længder
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 urets visere
ctx.clearRect(0, 0, 400, 400); // Ryd lærredet
drawClockFace(); // Tegn urskiven
addClockNumbers(); // Tilføj urtal
drawClockHands(timeAngle, minuteAngle, secondAngle); // Tegn urets visere
}, 1000); // Opdater uret hvert 1000 millisekund (1 sekund)
```
Denne kode vil skabe et funktionelt analogt ur, der opdateres i realtid. Du kan tilpasse urskivens farver, skrifttyper og viserlængder for at skabe forskellige designs.
