①首先在HTML的body标签中添加一个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);       //逆时针旋转90cxt.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  2  3  4     
      5      6  7  8     
      9 10     87     
     
88 89