html5绘制时钟动画

<canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas>

复制代码

代码如下:

var clock=document.getelementbyid("clock");
var cxt=clock.getcontext("2d");
function drawnow(){
var now=new date();
var hour=now.gethours();
var min=now.getminutes();
var sec=now.getseconds();
hour=hour>12?hour-12:hour;
hour=hour+min/60;
//表盘(蓝色)
cxt.linewidth=10;
cxt.strokestyle="blue"
cxt.beginpath();
cxt.arc(250,250,200,0,360,false);
cxt.closepath();
cxt.stroke();
//刻度
//时刻度
for(var i=0;i<12;i++){
cxt.save();
cxt.linewidth=7;
cxt.strokestyle="black";
cxt.translate(250,250);
cxt.rotate(i*30*math.pi/180);//旋转角度 角度*math.pi/180=弧度
cxt.beginpath();
cxt.moveto(0,-170);
cxt.lineto(0,-190);
cxt.closepath();
cxt.stroke();
cxt.restore();
}
//分刻度
for(var i=0;i<60;i++){
cxt.save();
//设置分刻度的粗细
cxt.linewidth=5;
//重置画布原点
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(i*6*math.pi/180);
//画分针刻度
cxt.strokestyle="black";
cxt.beginpath();
cxt.moveto(0,-180);
cxt.lineto(0,-190);
cxt.closepath();
cxt.stroke();
cxt.restore();
}
//时针
cxt.save();
// 设置时针风格
cxt.linewidth=7;
cxt.strokestyle="black";
cxt.translate(250,250);
cxt.rotate(hour*30*math.pi/180);
cxt.beginpath();
cxt.moveto(0,-140);
cxt.lineto(0,10);
cxt.closepath();
cxt.stroke();
cxt.restore();
//分针
cxt.save();
cxt.linewidth=5;
cxt.strokestyle="black";
//设置异次元空间分针画布的中心
cxt.translate(250,250);
cxt.rotate(min*6*math.pi/180);
cxt.beginpath();
cxt.moveto(0,-160);
cxt.lineto(0,15);
cxt.closepath();
cxt.stroke()
cxt.restore();
//秒针
cxt.save();
//设置秒针的风格
//颜色:红色
cxt.strokestyle="red";
cxt.linewidth=3;
//重置原点
cxt.translate(250,250);
//设置角度
//cxt.rotate(330*math.pi/180);
cxt.rotate(sec*6*math.pi/180);
cxt.beginpath();
cxt.moveto(0,-170);
cxt.lineto(0,20);
cxt.closepath();
cxt.stroke();
//画出时针,分针,秒针的交叉点
cxt.beginpath();
cxt.arc(0,0,5,0,360,false);
cxt.closepath();
//设置填充
cxt.fillstyle="gray";
cxt.fill();
//cxt.strokestyle="red";
cxt.stroke();
//画出秒针的小圆点
cxt.beginpath();
cxt.arc(0,-140,5,0,360,false);
cxt.closepath();
//设置填充
cxt.fillstyle="gray";
cxt.fill();
//cxt.strokestyle="red";
cxt.stroke();</p> <p> cxt.restore();</p> <p>}
function drawclock(){
cxt.clearrect(0,0,500,500);
drawnow();
}
drawnow();
setinterval(drawclock,1000);