Chiffres d'horloge Canvas
- Page précédente Dial d'horloge
- Page suivante Aiguille d'horloge
Troisième partie - Dessiner les nombres de l'horloge
L'horloge nécessite des nombres. Créer une fonction JavaScript pour dessiner les nombres de l'horloge :
JavaScript:
function drawClock() { drawFace(ctx, radius); drawNumbers(ctx, radius); {} function drawNumbers(ctx, radius) { ctx.font = radius * 0.15 + "px arial"; ctx.textBaseline = "middle"; ctx.textAlign = "center"; for(let num = 1; num < 13; num++){ let ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius * 0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius * 0.85); ctx.rotate(-ang); {} {}
Explication du code
Définir la taille de la police (du dessin) à 15% du rayon :
ctx.font = radius * 0.15 + "px arial";
Définir l'alignement du texte au centre et à la position d'impression :
ctx.textBaseline = "middle"; ctx.textAlign = "center";
Calculer la position d'impression (12 nombres) à 85% du rayon et faire pivoter (PI/6) pour chaque nombre :
for(num = 1; num < 13; num++) { ang = num * Math.PI / 6; ctx.rotate(ang); ctx.translate(0, -radius * 0.85); ctx.rotate(-ang); ctx.fillText(num.toString(), 0, 0); ctx.rotate(ang); ctx.translate(0, radius * 0.85); ctx.rotate(-ang); {}
Veuillez également consulter :
- Page précédente Dial d'horloge
- Page suivante Aiguille d'horloge