Partie IV - Dessinez Clock Hands
L'horloge a besoin des mains. Créer une fonction JavaScript pour dessiner les mains d'horloge:
JavaScript:
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second,
radius*0.9, radius*0.02);
}
function drawHand(ctx,
pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
Essayez - le vous - même » Exemple Explained
Utilisez date pour obtenir l'heure, minute, seconde:
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();Calculer l'angle de l'aiguille des heures, et dessiner une longueur (50% of radius) , et une largeur (7% of radius) :
hour=hour%12;
hour=(hour*Math.PI/6)+(minute*Math.PI/(6*60))+(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);Utilisez la même technique pour les minutes et les secondes.
Le drawHand() de routine n'a pas besoin d' une explication. Il dessine juste une ligne avec une longueur et une largeur donnée.