Derniers tutoriels de développement web
 

Canvas Aiguilles de l'horloge


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.