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();
}
