Use canvas to draw a dynamic clock-Automatic Dynamic Update time per second and canvas Update Time

Use canvas to draw a dynamic clock-Automatic Dynamic Update time per second and canvas Update Time
Use canvas to draw a clock

The following is part of the code. complete code can be found:Https://github.com/lemoncool/canvas-clock, Which can be downloaded directly.

First, let's take a look: The time will be dynamically updated every second.

　　

I. Preparations

1. Prepare a container in HTML to store the canvas and Set width and height for it.

<div>    <canvas id="clock" height="200px" width="200px"></canvas></div>

2. Get the canvas Element in js and obtain its context. The corresponding method isCanvas. getContext

Let dom = document. getElementById ('clock '); // obtain the canvas let ctx = dom. getContext ('2d'); // obtain the canvas Context
Let width = ctx. canvas. width; // obtain the preset canvas width.
Let height = ctx. canvas. height; // obtain the pre-configured canvas height.
Let r = width/2; // defines the radius to prepare for subsequent circular drawing.

Ii. Draw the disc Background:

Function drawBackground () {ctx. save (); // save the current canvas status before each start to avoid moving the canvas to affect subsequent painting of ctx. translate (r, r); // move the start point to the center ctx. beginPath (); // you must start a path ctx before each painting. lineWidth = 10; // set the width of the drawn line ctx. arc (0, 0, r-ctx. lineWidth/2, 0, 2 * Math. PI, false); // draw an entire circle ctx. stroke (); // stroke the circle}

3. Draw the hour Scale (1-12) and the minute Scale (small dots between hours are marked for minutes)

Before drawing, first take a look at the hour Scale (, 3,... 12) in the coordinates of the container to determine

Therefore, X = r * cos (angle) ==> X = Math for each scale point. cos (rad) * r Y = r * sin (angle) ==> Y = Math. sin (rad) * r

However, the angles in Math. cos (rad) and Math. sin (rad) must be radians. For details about the conversion between radians and angles, see section 360 degrees of circumference = radians 2 * Math. PI.

Therefore, the clock has a total of 12 hours, and the radians of that hour are: rad = 2 * Math. PI/12.
The cycle time is 60 minutes, and the radians per minute are: rad = 2 * Math. PI/60.

Now we know the radians of hours and minutes. Let's start to draw them.

Var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; // defines the array hourNumbers marked with hours. map (function (number, I) {// traverse each scale and Index
// The radians of each scale are the radians of the index multiplied by an hour, that is, one o'clock, 30 degrees, two o'clock, and so on ..
Var rad = 2 * Math. PI/12 * I;
Var x = Math. cos (rad) * (r-30 * rem );
Var y = Math. sin (rad) * (r-30 * rem); // determine the X and Y coordinates of each scale point.
Ctx. textAlign = 'center'; // The drawn scale is in the left-right corner of the entire canvas.
Ctx. textBaseline = 'middle'; // Similarly, It is centered up and down.
Ctx. font = 18 * rem + "px Arial"; // you can specify the font and font size of the 1, 2, and 3 .. numbers displayed on the scale.
Ctx. fillText (number, x, y) // draw text
});

Draw a small dot that marks a minute is similar to draw an hour, but the radian is 60 and draw a solid small dot.

The plot is as follows:

　　

4. Draw the hour hand, minute hand, second hand and center point

The principle of drawing the hour and minute hands is to draw a straight line.

The main methods used are:Ctx. rotate (); ctx. moveTo (); ctx. lineTo (); ctx. lineCap = "";

The following uses the drawing of the hour hand as an example to describe the principle:

Function drawHour (hour, minute) {ctx. save (); // stores the canvas status. ctx was mentioned earlier. beginPath (); // start a path var rad = 2 * Math. PI/12 * hour; // The radian var mrad that rotates hourly = 2 * Math. PI/12/60 * minute; // The radian ctx that rotates every minute. rotate (rad + mrad); // rotate ctx. lineWidth = 6; // set the width of ctx. moveTo (0, 10); // move the start point to (0, 10) ctx. lineTo (0,-r/2); // draw from the start point to the (0, r/2) point, and the negative sign indicates the direction up ctx. lineCap = 'round '; // sets the end line cap ctx. stroke (); // stroke ctx. restore (); // restore the canvas to its status before rotation}

The hour, minute, second, and origin points are drawn as follows:

　　

5. Make the clock pointer move

The principle is to obtain the current time.New Date (), Set the timerSetInterval (draw, 1000)Update the canvas at intervals

Function draw () {ctx. clearRect (0, 0, width, height); // clear the canvas before re-drawing. Otherwise, the status overlay is displayed, such as var now = new Date (); // obtain the current time var hour = now. getHours (); // var minute = now in the current hour. getMinutes (); // var second = now in the current minute. getSeconds (); // the current number of seconds drawBackground (); // draw the disc background drawHour (hour, minute); // draw the clockwise drawMinute (minute ); // draw the sub-needle drawSecond (second); // draw the second-hand drawDot (); // draw the origin ctx. restore (); // return canvas status} setInterval (draw, 1000); // The timer executes the entire painting method.

To clear the canvasCtx. clearRect ()So be sure to clear the canvas and re-draw the canvas before painting.

6. The clock is displayed and will be updated by the user.

The entire code logic references the MOOC NetworkSilva ZhouThanks again for your explanation.

The article records and summarizes the information for future use. If any problem is found, leave a message for guidance ~