Canvas绘制时钟

①首先在HTML的body标签中添加一个canvas标签，用于绘制时钟。

<canvas id="myCanvas" width="600" height="300"></canvas>

②在JavaScript中通过getElementById函数得到Canvas对象，并创建画笔。

1 var c=document.getElementById("myCanvas");
2 var cxt= c.getContext("2d");

③定义三个变量，slen表示秒针，mlen表示分钟，hlen表示时针，并分别赋值。

 var slen=60;
 var mlen=50;
 var hlen=40;

④开始绘制图形，设置填充色，以坐标点（200,150）为圆心，半径为100，起始弧度为0，终点弧度为360，绘制一个圆形

  cxt.beginPath();
  cxt.strokeStyle="#00f";
  //绘制一个以(200,150)为圆心，100为半径，起始弧度为0，终止弧度为360的圆
  cxt.arc(200,150,100,0,2*Math.PI,true);
  cxt.stroke();
  cxt.closePath();

⑤重新开始绘制图形，将当前起始点移动到坐标点（200,150），并将当前坐标系逆时针旋转90；

cxt.beginPath();
cxt.translate(200,150);        //平移当前起始点坐标
cxt.rotate(-Math.PI/2);       //逆时针旋转90
cxt.save();                    //保存当前路径

⑥通过一个算法完成绘制时钟时刻和数字，并且在每5个刻度后将当前坐标系顺时针旋转60

 //完成绘制时针刻度和数字，并且在每5个刻度后将当前坐标系顺时针旋转60度。
        for(var i=0;i<60;i++){
            if(i%5==0){
                cxt.fillRect(80,0,20,5);
                cxt.fillText(""+(i/5==0?12:i/5),70,0);
            }else{
                cxt.fillRect(90,0,10,2);
            }
            cxt.rotate(Math.PI/30);
        }
        cxt.closePath();

⑦定义三个变量，ls代表当前时间的秒，lm代表当前时间的分，lh代表当前时间的小时，并为其赋初始值0

  //ls当前时间的秒，lm当前的分，lh当前的小时
        var ls= 0,lm= 0,lh=0;

⑧定义一个函数，该函数每秒执行一次，用于重新绘制时针、分针和秒针

        function Refresh(){
            cxt.restore();                           //恢复之前的状态
            cxt.save();                              //保存状态
            cxt.rotate(ls * Math.PI / 30);         //根据秒针旋转坐标
            cxt.clearRect(5, -1, slen+1, 2+2);      //清除秒针
            cxt.restore();                          //恢复之前的状态
            cxt.save();                             //保存状态
            cxt.rotate(lm * Math.PI / 30);        //根据分针旋转坐标
            cxt.clearRect(5, -1, mlen+1, 3+2);    //清除分针
            cxt.restore();cxt.save();

            cxt.rotate(lh * Math.PI / 6);         //根据时针旋转坐标
            cxt.clearRect(5, -3, hlen+1, 4+2);    //清除秒针

            var time = new Date();                //获取当前时间
            var s = ls=time.getSeconds();         //获取秒
            var m = lm=time.getMinutes();         //获取分
            var h = lh=time.getHours();           //获取小时
            cxt.restore();
            cxt.save();

            cxt.rotate(s * Math.PI / 30);       //根据秒旋转坐标
            cxt.fillRect(5, 0, slen, 2);        //绘制秒针
            cxt.restore(); cxt.save();
            cxt.rotate(m * Math.PI / 30);      //根据分旋转坐标
            cxt.fillRect(5, 0, mlen, 3);       //绘制分针
            cxt.restore(); cxt.save();
            cxt.rotate(h * Math.PI / 6);       //根据时旋转坐标
            cxt.fillRect(5, -2, hlen, 4);      //绘制时针
        }

⑨设置每秒钟刷新一次

/设置每秒刷新一次
        var MyInterval = setInterval("Refresh();", 1000);

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <canvas id="myCanvas" width="600" height="300"></canvas>
 9 
10     <script type="text/javascript">
11         var c=document.getElementById("myCanvas");
12         var cxt= c.getContext("2d");
13         //定义三个变量分别是秒针，分针，时针
14         var slen=60;
15         var mlen=50;
16         var hlen=40;
17 
18         cxt.strokeRect(0,0, c.width, c.height);
19 
20         cxt.beginPath();
21         cxt.strokeStyle="#00f";
22         cxt.fillStyle="#00f";
23         cxt.arc(200,150,5,0,2*Math.PI,true);
24         cxt.fill();
25         cxt.closePath();
26         cxt.beginPath();
27 
28         cxt.strokeStyle="#00f";
29         //绘制一个以(200,150)为圆心，100为半径，起始弧度为0，终止弧度为360的圆
30         cxt.arc(200,150,100,0,2*Math.PI,true);
31         cxt.stroke();
32         cxt.closePath();
33         //重新绘制，将当前起始点移动到坐标点（200,150），将当前坐标系逆时针旋转90
34         cxt.beginPath();
35         cxt.translate(200,150);        //平移当前起始点坐标
36         cxt.rotate(-Math.PI/2);       //逆时针旋转90
37         cxt.save();                    //保存当前路径
38 
39         //完成绘制时针刻度和数字，并且在每5个刻度后将当前坐标系顺时针旋转60度。
40         for(var i=0;i<60;i++){
41             if(i%5==0){
42                 cxt.fillRect(80,0,20,5);
43                 cxt.fillText(""+(i/5==0?12:i/5),70,0);
44             }else{
45                 cxt.fillRect(90,0,10,2);
46             }
47             cxt.rotate(Math.PI/30);
48         }
49         cxt.closePath();
50 
51         //ls当前时间的秒，lm当前的分，lh当前的小时
52         var ls= 0,lm= 0,lh=0;
53         function Refresh(){
54             cxt.restore();                           //恢复之前的状态
55             cxt.save();                              //保存状态
56             cxt.rotate(ls * Math.PI / 30);         //根据秒针旋转坐标
57             cxt.clearRect(5, -1, slen+1, 2+2);      //清除秒针
58             cxt.restore();                          //恢复之前的状态
59             cxt.save();                             //保存状态
60             cxt.rotate(lm * Math.PI / 30);        //根据分针旋转坐标
61             cxt.clearRect(5, -1, mlen+1, 3+2);    //清除分针
62             cxt.restore();cxt.save();
63 
64             cxt.rotate(lh * Math.PI / 6);         //根据时针旋转坐标
65             cxt.clearRect(5, -3, hlen+1, 4+2);    //清除秒针
66 
67             var time = new Date();                //获取当前时间
68             var s = ls=time.getSeconds();         //获取秒
69             var m = lm=time.getMinutes();         //获取分
70             var h = lh=time.getHours();           //获取小时
71             cxt.restore();
72             cxt.save();
73 
74             cxt.rotate(s * Math.PI / 30);       //根据秒旋转坐标
75             cxt.fillRect(5, 0, slen, 2);        //绘制秒针
76             cxt.restore(); cxt.save();
77             cxt.rotate(m * Math.PI / 30);      //根据分旋转坐标
78             cxt.fillRect(5, 0, mlen, 3);       //绘制分针
79             cxt.restore(); cxt.save();
80             cxt.rotate(h * Math.PI / 6);       //根据时旋转坐标
81             cxt.fillRect(5, -2, hlen, 4);      //绘制时针
82         }
83         
84         //设置每秒刷新一次
85         var MyInterval = setInterval("Refresh();", 1000);
86     </script>
87     <div id="div1" style=" background:#00f;"></div>
88 </body>
89 </html>