search

Home >Web Front-end >H5 Tutorial >Code sharing for writing a clock on a webpage using pure HTML5_html5 tutorial skills

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

WBOY
WBOYOriginal
2016-05-16 15:46:231916browse

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. >  
  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;i<60
  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.                                                                                                                                                                                                                                            🎜>
    38.                                                                                                                                                                                                                           ’ s ’ s         ’s ‐ to GC.be''s-'s t-----oGC.beginPath();                    
  39. for(i=0;i
    40. <
  40. 12
    41. ;i ){                   //i is 12, which represents the 12 grids of the clock scale
    42. oGC.moveTo(x,y);
  42.                                                                                                                                                                     ‐               oGC. =Angle*Math.PI/180                                                                   
  43. oGC.closePath();
  44. oGC.stroke();
  46.                                                                                                                                                                                                                                                                                             oGC.beginPath(); oGC.moveTo(x,y);
  47.                                   oGC.arc(x,y,r*18/20,360*(i 1)*Math.PI/180,false);                     
  48. oGC.closePath();
  49. oGC.fill();//The dial is completed
  51. <<>
    52. OGC.LineWidth
  52. =
    53. 5
  53. ;
    54. oGC.beginPath();//Start drawing the hour hand
  54. oGC.moveTo(x,y);
    55. oGC.arc(x,y,r*10/20,oHoursValue,oHoursValue,false);//Set the hour hand size and radian
    56. oGC.closePath();
    57. oGC.stroke();
    59. <<>
  59. OGC.LineWidth =
  60. 3 ;
  61. oGC.beginPath();//Start drawing the minute hand
  62. oGC.moveTo(x,y);
  64. oGC.arc(x,y,r*14/20,oMinValue,oMinValue,false);//Set the minute hand size and radian
    65. oGC.closePath();
    66. oGC.stroke();
    68. <<>
  68. OGC.LineWidth = 1 ; // Set the width of the second hand oGC.beginPath();//Start drawing the second hand
  69. oGC.moveTo(x,y);
  71. oGC.arc(x,y,r*19/20,oSenValue,oSenValue,false);//Set the second hand size and arc
  72. oGC.closePath();
  73. oGC.stroke();
  74.                                                                     
  75. setInterval(drawClock,1000);//Set the timer and let the clock run
  76. drawClock();
  77. };
  78. script>
  79. head>
  80. <body>
  81.  <canvas id = "ch1" width = "400px" height = "400px">canvas> 
  82. body>
  83. html>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of the use of manifest cache in HTML5_html5 tutorial skillsNext article：Detailed explanation of the use of manifest cache in HTML5_html5 tutorial skills

Related articles

See more