html:

<canvas id="canvas"></canvas>

js:

window.onload=function(){

beginTime();

setInterval(beginTime,1000);

}

function beginTime(){

var oDate = new Date();//获取当前时间

var oHours = oDate.getHours();//定义时

var oMin = oDate.getMinutes();//定义分

var oSen = oDate.getSeconds();//定义秒

var oHoursValue=(-90+oHours*30)*Math.PI/180;//把时转换成弧度

var oMinValue=(-90+oMin*6)*Math.PI/180;//把分转换成弧度

var oSenValue=(-90+oSen*6)*Math.PI/180;//把秒转换成弧度

// alert(1);

// 创建一个圆形：x,y圆心的坐标，r半径，startAngle起点的弧度，endAngle终点的弧度，是顺时针旋转还是逆时针

// context.act(x,y,r,startAngle,endAngle,false);

var x = 200;

var y = 200;

var r = 150;

var canvas = document.getElementById("canvas");//获取canvas的对象

var context = canvas.getContext("2d");//设置环境

canvas.width=500;//定义宽度

canvas.height=500;//定义高度

context.clearRect(0,0,canvas.width,canvas.height);//清除

// 1：画分钟点

context.beginPath();//开始

for(var i=0; i<60;i++){

// 开始一条路径，移动到位置 0,0

context.moveTo(x,y);

// 创建一个圆形：

context.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);

}

context.closePath();//结束

context.stroke();

context.fillStyle = '#fff';

context.beginPath();//开始

context.moveTo(x,y);

context.arc(x,y,r*19/20,0,360*Math.PI/180,false);

context.closePath();//结束

context.fill();

//2：时针点

context.beginPath();//开始

context.lineWidth=3;

for(var i=0; i< 12;i++){

context.moveTo(x,y);

context.arc(x,y,r,30*i*Math.PI/180,30*(i + 1)*Math.PI/180,false);

}

context.closePath();//结束

context.stroke();

context.fillStyle = '#fff';

context.beginPath();//开始

context.moveTo(x,y);

context.arc(x,y,r*18/20,0,360*Math.PI/180,false);

context.closePath();//结束

context.fill();

// 画时针

context.lineWidth = 5;

context.beginPath();

context.moveTo(x,y);

context.arc(x,y,r*11/20,oHoursValue,oHoursValue,false);

context.closePath();//结束

context.stroke();

// 画分针

context.lineWidth = 3;

context.beginPath();

context.moveTo(x,y);

context.arc(x,y,r*15/20,oMinValue,oMinValue,false);

context.closePath();//结束

context.stroke();

// 画秒针

context.lineWidth = 1;

context.beginPath();

context.moveTo(x,y);

context.arc(x,y,r*17/20,oSenValue,oSenValue,false);

context.closePath();//结束

context.stroke();

}