|
La création d'une horloge analogique avec un canevas HTML5 implique les étapes suivantes :
1. Créer un canevas :
- Commencez par créer un élément de canevas HTML5. Vous pouvez le faire en ajoutant le code suivant à votre document HTML :
```html
```
2. Obtenez le contexte du canevas :
- Ensuite, vous devez obtenir le contexte du canevas, qui vous permet de dessiner sur le canevas. Vous pouvez utiliser la méthode `getContext()` pour ce faire.
```javascript
var canevas =document.getElementById("horloge");
var ctx =toile.getContext("2d");
```
3. Dessinez le cadran de l'horloge :
- Commencez à dessiner le cadran de l'horloge en définissant le style de remplissage et la largeur de ligne. Ensuite, dessinez un cercle pour le cadran de l’horloge.
```javascript
// Définit le style de remplissage et la largeur de ligne
ctx.fillStyle ="blanc" ;
ctx.StrokeStyle ="noir" ;
ctx.lineWidth =10 ;
// Dessine le cadran de l'horloge
ctx.beginPath();
ctx.arc(200, 200, 150, 0, 2 * Math.PI);
ctx.fill();
ctx.AVC();
```
4. Ajouter des numéros d'horloge :
- Ensuite, vous devez ajouter des chiffres sur le cadran de l'horloge. Vous pouvez le faire en utilisant la méthode `fillText()`.
```javascript
// Définir la police et l'alignement du texte
ctx.font ="gras 20px Arial";
ctx.textAlign ="centre" ;
// Ajout des numéros d'horloge
pour (var je =1; je <=12; je++) {
var angle =(i * 30) * Math.PI/180;
var x =200 + Math.cos(angle) * 130 ;
var y =200 + Math.sin(angle) * 130 ;
ctx.fillText(i, x, y);
}
```
5. Dessiner les aiguilles de l'horloge :
- Pour dessiner les aiguilles de l'horloge, vous devez calculer les angles et les longueurs en fonction de l'heure actuelle.
```javascript
// Récupère l'heure actuelle
var date =nouvelle Date();
var heures =date.getHours();
var minutes =date.getMinutes();
var secondes =date.getSeconds();
// Calculer les angles et longueurs des mains
var hourAngle =(heures % 12 + minutes / 60) * 30 * Math.PI / 180 ;
var minuteAngle =(minutes + secondes / 60) * 6 * Math.PI / 180 ;
var secondAngle =(secondes) * 6 * Math.PI / 180 ;
var hourHandLength =80 ;
var minuteHandLength =120 ;
var secondeHandLength =140 ;
// Dessine l'aiguille des heures
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(hourAngle) * hourHandLength,
200 + Math.sin(hourAngle) * hourHandLength
);
ctx.AVC();
// Dessine l'aiguille des minutes
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(minuteAngle) * minuteHandLength,
200 + Math.sin(minuteAngle) * minuteHandLength
);
ctx.AVC();
// Dessine la trotteuse
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(
200 + Math.cos(secondAngle) * secondeHandLength,
200 + Math.sin(secondAngle) * secondeHandLength
);
ctx.AVC();
```
6. Animer l'horloge :
- Pour animer l'horloge, vous pouvez utiliser la fonction `setInterval()` pour mettre à jour la position des aiguilles de l'horloge toutes les secondes.
```javascript
// Met à jour l'horloge toutes les secondes
setInterval(fonction() {
// Récupère l'heure actuelle
var date =nouvelle Date();
var heures =date.getHours();
var minutes =date.getMinutes();
var secondes =date.getSeconds();
// Calculer les angles et longueurs des mains
var hourAngle =(heures % 12 + minutes / 60) * 30 * Math.PI / 180 ;
var minuteAngle =(minutes + secondes / 60) * 6 * Math.PI / 180 ;
var secondAngle =(secondes) * 6 * Math.PI / 180 ;
// Dessine les aiguilles de l'horloge
ctx.clearRect(0, 0, 400, 400); // Efface le canevas
drawClockFace(); // Dessine le cadran de l'horloge
addClockNumbers(); // Ajouter des numéros d'horloge
drawClockHands (hourAngle, minuteAngle, secondAngle); // Dessine les aiguilles de l'horloge
}, 1000); // Met à jour l'horloge toutes les 1000 millisecondes (1 seconde)
```
Ce code créera une horloge analogique fonctionnelle qui se mettra à jour en temps réel. Vous pouvez personnaliser les couleurs, les polices et la longueur des aiguilles du cadran de l'horloge pour créer différents designs.
|
