Numéros d'horloge en toile
Partie III - Tirage au sort des numéros d'horloge
L'horloge a besoin de chiffres. Créez une fonction JavaScript pour dessiner des numéros d'horloge :
JavaScript :
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius * 0.15 + "px arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
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);
}
}
Exemple expliqué
Définissez la taille de la police (de l'objet dessin) sur 15 % du rayon :
ctx.font = radius * 0.15 + "px arial";
Définissez l'alignement du texte au milieu et au centre de la position d'impression :
ctx.textBaseline = "middle";
ctx.textAlign = "center";
Calculez la position d'impression (pour 12 numéros) à 85 % du rayon, tourné (PI/6) pour chaque numéro :
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);
}