Home > Developer > JavaScript

HTML5 application clock and html5 clock

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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>
  8. <Body>
  9. <Canvas id = "clock" width = "400" height = "400"> </canvas>
  10. </Body>
  11. </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
  7. Ctx. fillStyle = '# fff' // fill in the white background color
  8. Ctx. fillRect (, c. width, c. height); // you can specify the canvas area.
  10. Ctx. save (); // save the current drawing status
  12. // Time scale
  13. For (var I = 0; I <12; I ++) {// divide 12 scales
  14. Var angle = (Math. PI * 2)/12; // obtain the radians of each scale
  15. Ctx. beginPath (); // start painting
  16. Ctx. font = "12px Arial"; // set the font
  17. If (I = 0 | I = 3 | I = 6 | I = 9) {// when pointing to 0 (12 points)
  18. Ctx. fillStyle = "red"; // The scale is red.
  19. Radius = 4; // The scale radius is 4px long.
  20. } Else {
  21. Ctx. fillStyle = "blue"; // The scale is blue.
  22. Radius = 3; // The scale radius is 3px.
  23. }
  25. Ctx. arc (x, y-100, radius, 0, Math. PI * 2, true); // circle as scale
  26. Ctx. fill (); // fill path
  27. Transform (ctx, x, y, angle, true); // scale Distribution
  28. }
  29. Ctx. restore (); // restore the status of the last saved drawing
  30. ...
  31. }


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 ();
  12. // Split the needle to rotate
  13. Ctx. save ();
  14. Ctx. strokeStyle = "blue ";
  15. Ctx. lineWidth = 2;
  16. Transform (ctx, x, y, (Math. PI * 2)/60 * m );
  17. Sj (ctx, x, y, y-68 );
  18. Ctx. restore ();
  20. // Seconds
  21. Ctx. save ();
  22. Ctx. strokeStyle = "#000 ";
  23. Transform (ctx, x, y, sAngle );
  24. Sj (ctx, x, y, y-80 );
  25. Ctx. restore ();
  27. // Data sorting
  28. If (s % 60 = 0 ){
  29. SAngle = 0, s = 0, m ++;
  30. If (m % 12 = 0) {// rotate once every 12 minutes
  31. If (m! = 0) h ++;
  32. If (m % 60 = 0) m = 0;
  33. }
  34. If (h % 60 = 0) h = 0;
  35. }
  36. }


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 );

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
html5 clock widget html5 drag and drop html5 and css book html5 and php example html5 and css3 book html5 charts and graphs alarm clock and timer
Related Article
JavaScript solution to the eight Queens Problem method summar...
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
The html space symbol nbsp; ensp; emsp; introduces and implem...

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More