①首先在HTML的body标签中添加一个canvas标签，用于绘制时钟。
<canvas id="myCanvas" width="600" height="300"></canvas>
②在JavaScript中通过getElementById函数得到Canvas对象，并创建画笔。
var c=document.getElementById("myCanvas");
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);
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="600" height="300"></canvas> <script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt= c.getContext("2d");
//定义三个变量分别是秒针，分针，时针
var slen=60;
var mlen=50;
var hlen=40; cxt.strokeRect(0,0, c.width, c.height); cxt.beginPath();
cxt.strokeStyle="#00f";
cxt.fillStyle="#00f";
cxt.arc(200,150,5,0,2*Math.PI,true);
cxt.fill();
cxt.closePath();
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度。
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当前的小时
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);
</script>
<div id="div1" style=" background:#00f;"></div>
</body>
</html>
