Clock with Javascript 3 ways

Photo by Jiyeon Park on Unsplash

About the analog clock, there are many ways to do it in Javascript.

The Math theory is to calculate the degree depending on how many parts you want to divide.

Because the circle is 360 degrees. The basic is one minute equal to 60 seconds, one hour equal to 60 minutes.

First, we need a clock on-page, so there are several ways.

1. canvas

According to W3C clock, it’s clear that drawing a canvas is a good visual resolution. with getContext(‘2d’), and draw the clockface, number, and time.

The canvas drawing uses the line, stroke, and fill a lot.

such as the drawFace(), the circle with radius Math,because the circle is 2PI*radius,and fill with color inside.

2.svg

there is a way to use SVG in Html.