在线时钟html5,HTML5应用之时钟

今天，我们一起来使用HTML5制作一个指针会走动的时钟。

HTML

我们只需要在html中放置一个canvas标签：#clock，宽度和高度都是400px。

HTML5应用之时钟

Javascript

我们先来获取当前时间：包括时分秒，确保在打开页面时能定位指针位置，并且定义好圆点坐标和秒钟角度变量。

var time = new Date();

var h = time.getHours(); //时

var m = time.getMinutes(); //分

var s = time.getSeconds(); //秒

h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置

var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量

接下来，我们利用canvas来绘制时钟，我们写一个函数draw()，绘制刻度，执行该函数一次，则秒针顺时针走动1/60个圆弧度。

首先，获取canvas绘图对象，绘制时钟刻度。我们将时钟(圆)划分为12个刻度，即每个刻度代表一个钟头，当然，你也可以划分为60个刻度，这样每个刻度就代表1分钟。

function draw(){

var c=document.getElementById("clock");

var ctx=c.getContext("2d"); //获取绘图对象

ctx.clearRect(0,0,c.width,c.height); //清除上次绘制的图形

s++;//秒针

ctx.fillStyle = '#fff' //填充白色背景色

ctx.fillRect(0,0,c.width,c.height); //设置画布区域

ctx.save(); //保存当前绘图状态

// 时间刻度

for(var i=0;i<12;i++){ //划分12刻度

var angle=(Math.PI*2)/12; //获得每个刻度对应的弧度

ctx.beginPath();//开始绘制

ctx.font="12px Arial"; //设置字体

if(i==0||i==3||i==6||i==9){ //当指向0(12点)、3点、6点、9点时

ctx.fillStyle="red"; //刻度为红色

radius=4; //刻度半径长4px

}else{

ctx.fillStyle="blue"; //刻度为蓝色

radius=3; //刻度半径长为3px

}

ctx.arc(x,y-100,radius,0,Math.PI*2,true); //画圆作为刻度

ctx.fill(); //填充路径

transform(ctx,x,y,angle,true); //刻度分布

}

ctx.restore(); //恢复上次保存的绘图状态

...

}

按照上面的代码可以绘制一个带刻度的圆盘作为时钟的表盘。接下来我们继续在函数draw()里写时分秒指针的转动。

function draw(){

...

sAngle=(Math.PI*2)/60*s; //秒度

//时针转动

ctx.save();

ctx.strokeStyle="red";

ctx.lineWidth=3;

transform(ctx,x,y,(Math.PI*2)/60*h);

sj(ctx,x,y,y-40);

ctx.restore();

//分针转动

ctx.save();

ctx.strokeStyle="blue";

ctx.lineWidth=2;

transform(ctx,x,y,(Math.PI*2)/60*m);

sj(ctx,x,y,y-68);

ctx.restore();

//秒针转动

ctx.save();

ctx.strokeStyle="#000";

transform(ctx,x,y,sAngle);

sj(ctx,x,y,y-80);

ctx.restore();

//数据整理

if(s%60==0){

sAngle=0,s=0,m++;

if(m%12==0){ //每十二分 时针旋转一次

if(m!=0)h++;

if(m%60==0)m=0;

}

if(h%60==0)h=0;

}

}

每调用一次draw(),我们对时分秒针设置不同的填充颜色和指针粗细，绘制指针，根据弧度转动指针位置，其中我们调用了自定义函数trans()和pointer()。

函数pointer()用来绘制指针。其中ctx表示canvas对象，x,y是圆点坐标，z是指针头的位置。

function pointer(ctx,x,y,z){

ctx.beginPath();

ctx.moveTo(x,y);

ctx.lineTo(x,z);

ctx.stroke();

ctx.fill();

}

函数transform()用来旋转指针。其中ctx表示canvas对象，x,y是圆点坐标，angle是转动角度。

function trans(ctx,x,y,angle){

ctx.transform(Math.cos(angle), Math.sin(angle),

-Math.sin(angle), Math.cos(angle),

x*(1-Math.cos(angle)) + x*Math.sin(angle),

y*(1-Math.cos(angle)) - y*Math.sin(angle))

}

最后，我们设置每隔1秒钟(即1000毫秒)执行一次draw()。

setInterval("draw()",1000);