①首先在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>