Use pure HTML5 to write a code sharing of clocks on a web page

This article mainly introduces the use of pure HTML5 to write a code sharing of clocks on a web page. The program is very simple and does not have digital display on the clock. It purely reflects the most basic design ideas. Friends who need it can refer to it.

What you need to know:

The canvas tag is just a graph container and you have to use a script to draw the graph. Default size: 300px wide and 150px high;

The getContext() method returns an object that provides methods and properties for drawing on a canvas. - Get the context object.

getContext(2d) object properties and methods that can be used to draw text, lines, rectangles, circles, and more on canvas.

fillRect(l,t,w,h): The default color is black strokeRect(l,t,w,h): a square with border. Default one pixel black border

The setInterval() method calls a function or calculates an expression according to the specified period (in milliseconds).

beginPath(): defines the path to start drawing, which sets the current point to (0,0). When a canvas environment is first created, beginPath()

Methods are called explicitly.

closePath(): End drawing path (connecting the start point and the end point)

Draw a circle:

arc (x,y, radius, starting radian, end radian, rotation direction)

x,y: Starting position

The relationship between radian and angle: radian = angle *Math.PI/180

Rotation direction: clockwise (default: false, counterclockwise: true)

Code: