Aiguilles de l'horloge Canvas

Partie quatrième - Dessiner les aiguilles de l'horloge

Les horloges nécessitent des aiguilles. Créer une fonction JavaScript pour dessiner les aiguilles de l'horloge :

JavaScript :

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}
function drawTime(ctx, radius) {
  const now = new Date();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  // Heure
  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);
  // Seconde
  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);
}

Essayer vous-même

Explication du code

Créer un objet Date pour obtenir les heures, minutes et secondes :

const now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds();

Calculer l'angle de l'aiguille des heures et dessiner sa longueur (50% du rayon) et sa largeur (7% du rayon) :

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);

La même technique est utilisée pour dessiner l'aiguille des heures et l'aiguille des secondes.

L'implémentation de la procédure drawHand() ne nécessite pas d'explication. Elle dessine une ligne de largeur et de hauteur données.

Veuillez également consulter :

Manuel complet de Canvas sur CodeW3C.com