Code sharing for writing a clock on a webpage using pure HTML5_html5 tutorial skills

What you need to know:

The canvas tag is just a graphics container, you have to use a script to draw the graphics. Default size: width 300px, height 150px;

The getContext() method returns an object that provides methods and properties for drawing on the canvas. ——Get the context object.
getContext("2d") object properties and methods, which can be used to draw text, lines, rectangles, circles, etc. on the canvas.

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

The setInterval() method can call a function or calculate an expression according to the specified period (in milliseconds).

beginPath(): Define the beginning of drawing the path, which sets the current point to (0,0). When a canvas environment is first created, the beginPath()
method is called explicitly.
closePath(): End drawing the path (connect the starting point and end point)

Draw a circle:
arc (x, y, radius, starting arc, ending arc, rotation direction)
x, y: starting position
The relationship between arc and angle: Radians = angle *Math.PI/180
Rotation direction: clockwise (default: false, counterclockwise: true)

Code:

XML/HTML CodeCopy content to clipboard

1. HTML>  
2. html lang="en-US">  
3. head>  
4.         meta charset="UTF-8">  
5.         title>title>  
6.         script>  
7.                 window.onload = function(){   
8.                         var oC = document.getElementById('ch1');   
9.                         var oGC = oC.getContext('2d');   
10.   
11.                         function drawClock(){   
12.                                 var x = 200;   //指定坐标   
13.                                 var y = 200;   
14.                                 var r = 150;  //指定钟表半径   
15.   
16.                                 oGC.clearRect(0,0,oC.width,oC.height);//清空画布   
17.   
18.                                 var oDate = new Date();      //创建日期对象   
19. var Ohours = Odate .Gethours (); // var 🎜>
20. var 🎜>                                                                                                                                                                                                                                                                                       🎜>                           var var
21. osenvalue = (-90 osen*6)*math.pi/180; oGC.beginPath();//Start
23. for(var i=
24. 0;i60
25. ;i ){           //i is 60, which represents the 60 small scales of the clock oGC.moveTo(x,y);
26.                                              oGC.arc(x,y,r,6*i*Math.PI/180,6*(i 1)*Math.PI/180,false); //Loop from 6 degrees to 12 Degree
27.                                                                   
28. oGC.closePath();
29. oGC.stroke();
31.                                                                                                                                                                                                                               oGC.beginPath(); oGC.moveTo(x,y);
32. oGC.arc(x,y,r*19/20,0,360*(i 1)*Math.PI/180,false);
34. oGC.closePath();//End
35. oGC.fill();
37.                                                                                                                                                                                                                                            🎜>
                                                                                                                                                                                                                          ’ s ’ s         ’s ‐ to GC.be''s-'s t-----oGC.beginPath();                    
39. for(i=0;i
12;i ){                   //i is 12, which represents the 12 grids of the clock scale
oGC.moveTo(x,y);
41.                                                                                                                                                                     ‐               oGC. =Angle*Math.PI/180                                                                   
42. oGC.closePath();
43. oGC.stroke();
45.                                                                                                                                                                                                                                                                                             oGC.beginPath(); oGC.moveTo(x,y);
46.                                   oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);                     
47. oGC.closePath();
48. oGC.fill();//The dial is completed
OGC.LineWidth
51. =
5
52. ;
oGC.beginPath();//Start drawing the hour hand
53. oGC.moveTo(x,y);
oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//Set the hour hand size and radian
oGC.closePath();
oGC.stroke();
58. OGC.LineWidth =
59. 3 ;
60. oGC.beginPath();//Start drawing the minute hand
61. oGC.moveTo(x,y);
63. oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//Set the minute hand size and radian
oGC.closePath();
oGC.stroke();
67. OGC.LineWidth = 1 ; // Set the width of the second hand oGC.beginPath();//Start drawing the second hand
68. oGC.moveTo(x,y);
70. oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//Set the second hand size and arc
71. oGC.closePath();
72. oGC.stroke();
73.                                                                     
74. setInterval(drawClock,1000);//Set the timer and let the clock run
75. drawClock();
76. };
77. script>
78. head>
79. body>
80.  canvas id = "ch1" width = "400px" height = "400px">canvas> 
81. body>
82. html>

Click the result below to view the demo:
http://jsfiddle.net/eh02450b/2/