HTML5 application clock and html5 clock

Source: Internet
Author: User

HTML5 application clock and html5 clock

Using the Canvas API of HTML5, we can achieve unexpected animation effects. Before we wanted to place a clock on the webpage, we had to use flash tools to create a clock and write complex JavaScript code, and load it to the page. With the advent of HTML5, we can directly use the canvas tag on the page and use javascript to complete a beautiful clock.





Today, we will use HTML5 to create a clock with pointers moving around.

HTML

We only need to place a canvas label in html: # clock. The width and height are both 400px.

[Html]View plaincopy
  1. <! Doctype html>
  2. <Html>
  3. <Head>
  4. <Meta charset = "UTF-8">
  5. <Title> HTML5 application clock </title>
  6. </Head>
  7. <Body>
  8. <Canvas id = "clock" width = "400" height = "400"> </canvas>
  9. </Body>
  10. </Html>


Javascript

Let's get the current time first: including the hour, minute, and second. Make sure that the pointer position is located when the page is opened, and the dot coordinates and second angle variables are defined.

[Js]View plaincopy
  1. Var time = new Date ();
  2. Var h = time. getHours (); // time
  3. Var m = time. getMinutes (); // minute
  4. Var s = time. getSeconds (); // second
  5. H = h> 12? (H-12) * 5 + parseInt (m/12): h * 5 + parseInt (m/12); // hour initial position
  6. Var x = 200, y = 200, sAngle = 0; // x y origin second point angle variable


Next, we use canvas to draw the clock. We write a function draw () to draw a scale and execute this function once. Then, the second needle moves around 1/60 degrees of arc clockwise.

First, obtain the canvas Drawing Object and draw the clock scale. We divide the clock (circle) into 12 scales, that is, each scale represents an hour, of course, you can also divide it into 60 scales, so that each scale represents 1 minute.

[Js]View plaincopy
  1. Function draw (){
  2. Var c = document. getElementById ("clock ");
  3. Var ctx = c. getContext ("2d"); // obtain the Drawing Object
  4. Ctx. clearRect (, c. width, c. height); // clear the last drawing
  5. S ++; // seconds
  6. Ctx. fillStyle = '# fff' // fill in the white background color
  7. Ctx. fillRect (, c. width, c. height); // you can specify the canvas area.
  8. Ctx. save (); // save the current drawing status
  9. // Time scale
  10. For (var I = 0; I <12; I ++) {// divide 12 scales
  11. Var angle = (Math. PI * 2)/12; // obtain the radians of each scale
  12. Ctx. beginPath (); // start painting
  13. Ctx. font = "12px Arial"; // set the font
  14. If (I = 0 | I = 3 | I = 6 | I = 9) {// when pointing to 0 (12 points)
  15. Ctx. fillStyle = "red"; // The scale is red.
  16. Radius = 4; // The scale radius is 4px long.
  17. } Else {
  18. Ctx. fillStyle = "blue"; // The scale is blue.
  19. Radius = 3; // The scale radius is 3px.
  20. }
  21. Ctx. arc (x, y-100, radius, 0, Math. PI * 2, true); // circle as scale
  22. Ctx. fill (); // fill path
  23. Transform (ctx, x, y, angle, true); // scale Distribution
  24. }
  25. Ctx. restore (); // restore the status of the last saved drawing
  26. ...
  27. }


According to the above code, you can draw a dial with a scale as the clock. Next, we will continue to write the rotation of the hour, minute, and second pointer in the draw () function.

[Js]View plaincopy
  1. Function draw (){
  2. ...
  3. SAngle = (Math. PI * 2)/60 * s; // Second Degree
  4. // Clockwise rotation
  5. Ctx. save ();
  6. Ctx. strokeStyle = "red ";
  7. Ctx. lineWidth = 3;
  8. Transform (ctx, x, y, (Math. PI * 2)/60 * h );
  9. Sj (ctx, x, y, Y-40 );
  10. Ctx. restore ();
  11. // Split the needle to rotate
  12. Ctx. save ();
  13. Ctx. strokeStyle = "blue ";
  14. Ctx. lineWidth = 2;
  15. Transform (ctx, x, y, (Math. PI * 2)/60 * m );
  16. Sj (ctx, x, y, y-68 );
  17. Ctx. restore ();
  18. // Seconds
  19. Ctx. save ();
  20. Ctx. strokeStyle = "#000 ";
  21. Transform (ctx, x, y, sAngle );
  22. Sj (ctx, x, y, y-80 );
  23. Ctx. restore ();
  24. // Data sorting
  25. If (s % 60 = 0 ){
  26. SAngle = 0, s = 0, m ++;
  27. If (m % 12 = 0) {// rotate once every 12 minutes
  28. If (m! = 0) h ++;
  29. If (m % 60 = 0) m = 0;
  30. }
  31. If (h % 60 = 0) h = 0;
  32. }
  33. }


For each call to draw (), we set different fill colors and pointer thicknesses for the hour, minute, and second pins, draw pointers, and rotate pointer positions based on radians. In this example, we call the custom function trans () and pointer ().

The pointer () function is used to draw pointers. Ctx indicates the canvas object, x, y indicates the dot coordinate, and z indicates the position of the pointer header.

[Js]View plaincopy
  1. Function pointer (ctx, x, y, z ){
  2. Ctx. beginPath ();
  3. Ctx. moveTo (x, y );
  4. Ctx. lineTo (x, z );
  5. Ctx. stroke ();
  6. Ctx. fill ();
  7. }


The transform () function is used to rotate the pointer. Ctx indicates the canvas object, x, y indicates the dot coordinate, and angle indicates the rotation angle.

[Js]View plaincopy
  1. Function trans (ctx, x, y, angle ){
  2. Ctx. transform (Math. cos (angle), Math. sin (angle ),
  3. -Math. sin (angle), Math. cos (angle ),
  4. X * (1-Math.cos (angle) + x * Math. sin (angle ),
  5. Y * (1-Math.cos (angle)-y * Math. sin (angle ))
  6. }


Finally, we set to execute draw () every 1 second (that is, 1000 milliseconds ().

[Js]View plaincopy
    1. SetInterval ("draw ()", 1000 );

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.