Chiffres de l'horloge Canvas

Partie 2 - Dessiner le cadran

L'horloge a besoin d'un cadran. Créer une fonction JavaScript pour dessiner le cadran de l'horloge :

JavaScript :

function drawClock() {
  drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
  const grad = ctx.createRadialGradient(0, 0 ,radius * 0.95, 0, 0, radius * 1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius * 0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

essayez-le vous-même

explication du code

créer une fonction drawFace() pour dessiner le cadran de l'horloge :

function drawClock() {
  drawFace(ctx, radius);
}
function drawFace(ctx, radius) {
}

dessiner un cercle blanc :

ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = 'white';
ctx.fill();

créer une dégradation radiale (95% et 105% du rayon de l'horloge original) :

grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);

créer 3 repères de couleur, correspondant respectivement à la bordure interne, la bordure moyenne et la bordure externe de l'arc :

grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');

Astuce : ces trois repères de couleur peuvent produire un effet 3D.

définir la dégradation comme style de pinceau de l'objet de dessin :

ctx.strokeStyle = grad;

définir l'épaisseur du trait de l'objet de dessin (10% du rayon) :

ctx.lineWidth = radius * 0.1;

dessiner un cercle :

ctx.stroke();

tracer le centre de l'horloge :

ctx.beginPath();
ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
ctx.fillStyle = '#333';
ctx.fill();

Veuillez également consulter :

Manuel complet de Canvas sur CodeW3C.com