JavaScript Canvas Draw a circular clock __java

drawing clocks using canvas

The 2d drawing context supports many ways to draw paths on the canvas. Through the path can create complex shapes and lines. To draw the path, you must first call the Beginpath () method, which indicates that you want to start

Draws a new path. Then, you can actually draw the path by calling the following methods. arc (x, y, radius, startangle, Endangle, counterclockwise): Draws an arc (x,y) for the center of the circle, radius radius, starting and ending angles (in radians) respectively StartAngle and Endangle. The last parameter indicates whether StartAngle and Endangle are calculated in a counter-clockwise direction, and a value of false indicates a clockwise calculation.
arcto (x1, y1, x2, y2, radius): Draws an arc from the previous point to (X2,y2) and passes through (X1,Y1) at the given radius radius.
beziercurveto (C1x, c1y, C2X, c2y, X, y): Draw a curve from the previous point, to (X,y), and to (C1X,C1Y) and (c2x,c2y) as control points.
lineto (x, y): Draws a straight line from the previous point, until (x,y).
moveto (x, y): Moves the drawing cursor to (x,y) without drawing a line.
quadraticcurveto (CX, CY, X, y): Draws a two-time curve from the previous point to (X,y) and takes (Cx,cy) as a control point.
rect (x, y, Width, height): Draws a rectangle from the point (X,y), which is specified by width and height, respectively. This method draws a rectangular path, rather than a separate shape drawn by Strokerect () and FillRect ().

After you create a path, there are several possible options. If you want to draw a line that connects to the beginning of a path, you can call Closepath (). If the path is complete and you want to fill it with FillStyle, you can call the Fill () method. Alternatively, you can call the stroke () method to stroke the path, and the stroke uses the Strokestyle. Finally, you can call clip (), which creates a clipping region on the path.

<! DOCTYPE html>
 

 

 
will produce the following effect