Horloge Canvas

Dans les prochaines sections, nous allons construire une horloge simulée en utilisant le canevas HTML.

Première partie - Créer le canevas

L'horloge nécessite un conteneur HTML. Créer un canevas HTML :

Code HTML :

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
drawClock();
function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}
</script>
</body>
</html>

Essayez-le vous-même

Explication du code

Ajouter l'élément HTML <canvas> à votre page :

<canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>

Créer un objet de canevas (const canvas) :

const canvas = document.getElementById("canvas");

Créer un objet de dessin 2d pour l'objet de canevas (const ctx) :

const ctx = canvas.getContext("2d");

Utilisez la hauteur du canevas pour calculer le rayon de l'horloge :

let radius = canvas.height / 2;

Avis

Utilisez la hauteur du canevas pour calculer le rayon de l'horloge, afin que l'horloge s'adapte à toutes les tailles de canevas.

Replacer la position (0,0) de l'objet de dessin au centre du canevas :

ctx.translate(radius, radius);

Réduire le rayon de l'horloge (à 90%) et dessiner l'horloge à l'intérieur du canevas :

radius = radius * 0.90;

Créer une fonction pour dessiner l'horloge :

function drawClock() {
  ctx.arc(0, 0, radius, 0, 2 * Math.PI);
  ctx.fillStyle = "white";
  ctx.fill();
{}

Veuillez également consulter :

Manuel complet Canvas de CodeW3C.com