用easyx画电子钟_使用canvas画动态时钟

Canvas绘制时钟Demo

}

很抱歉,你的浏览器不支持canvas元素

varc=document.getElementById('myCanvas');//获取Canvas对象

varctx=c.getContext('2d');//获取上下文

functiondrawClock()

{

ctx.clearRect(0,0, c.width, c.height);//清除画布

c.width=c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠

varx= 250,y= 200,r= 180;//定义圆盘的中心坐标和圆盘的半径

/*获取实际的时间*/

varobjTime= newDate();varobjHour=objTime.getHours();varobjMin=objTime.getMinutes();varobjSen=objTime.getSeconds();/*将时间转换为具体的弧度*/

/** 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向

* 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间

* 分针和秒针是每次相隔6度*/

vararcHour=(-90+objHour*30 +objMin/2)*Math.PI/180;vararcMin=(-90+objMin*6)*Math.PI/180;

vararcSen=(-90+objSen*6)*Math.PI/180;

/*绘制圆盘*/ctx.beginPath();for(vari=0;i&