À la suite de mes premières expérimentations avec les canvas (voir mes trois premiers articles étiquetés #canvas) et de la consultation récente de pages traitant de la création d’horloges utilisant cette technologie, j’ai décidé d’en créer une à ma façon.

Pour mon horloge, j’ai voulu le faire de manière originale, à la manière des montres proposées par Tokyoflash Japan. Mon choix s’est arrêté sur l’utilisation de formes hexagonales (parce que j’aime bien cette forme).

Avec l’utilisation d’un anneau hexagonal et d’un hexagone au centre, un digit (dans notre cas, un ensemble anneau + hexagone au milieu) peut prendre 8 valeurs différentes, ce qui fait que l’heure sera affichée en base 8.

Vu que les minutes et secondes (les parties ayant les plus grandes valeurs) vont de 0 à 59, deux digits en octal pour chaque suffisent.

Principe

Le principe derrière chaque digit reste le même : selon la valeur de ce digit, les côtés de l’anneau et l’hexagone central sont « allumés » (ou non), selon l’image ci-dessus.

Les digits seront redessinés toutes les secondes, en faisant appel aux fonctions de dessin dans un setInterval().