使用html5 canvas 画时钟代码实例分享

html5足够强大实现很多功能，画一个时钟只是一个小玩意。图片指针用ctx的drawimage可以实现。至于兼容性问题，网上的解决方案已经很多了。这个东东是用来玩的，不是用来做应用的，学习下canvas api。

先给大家展示效果图

实现代码

复制代码

代码如下:

<script type="text/javascript">
// <![cdata[
var time = new date();
var h = time.gethours();
var m = time.getminutes();
var s = time.getseconds();
var weekday={:'星期日',:'星期一',:'星期二',:'星期三',:'星期四',:'星期五',:'星期六'};
h=h>?(h-)*+parseint(m/):h*+parseint(m/); //时针 初始位置
//=====================================
var x=,y=,sangle=; //x y 原点 秒针角度变量
function draw()
{
var c=document.getelementbyid("mycanvas");
var ctx=c.getcontext("d");
ctx.clearrect(,,c.width,c.height);
s++;//秒针
//背景
ctx.fillstyle = '#eee' // make changes to the settings
ctx.globalalpha = .;
ctx.fillrect(,,c.width,c.height); // draw a rectangle with new settings
//===填充(表明)原点===
ctx.beginpath();
ctx.arc(x,y,,,true);
ctx.fill();
ctx.closepath();
var grd=ctx.createlineargradient(x,y,,);
grd.addcolorstop(,"#ff");
grd.addcolorstop(.,"#ff");
grd.addcolorstop(,"#ff");
ctx.fillstyle=grd;
ctx.font = "pt arial";
ctx.filltext("html",,);
ctx.save();
// 时间刻度
for(var i=;i<;i++)
{
var angle=(math.pi*)/;
ctx.beginpath();
var b=i==||i==||i==||i==
if(i%==){
if(b){
ctx.fillstyle="red";
radius=;
}
else{
ctx.fillstyle="blue";
radius=.;
}
ctx.font="px arial";
ctx.filltext(i/==?:i/,x-,y-); //x大-右 小-左 y大小 数字刻度
}
else
{
ctx.fillstyle="#";
radius=;
}
if(s==i)radius=radius+;
ctx.arc(x,y-,radius,,true);
ctx.fill();
transform(ctx,x,y,angle,true);
}
ctx.restore();
//==========================
sangle=(math.pi*)/*s; //秒度
ctx.save(); //时针
ctx.fillstyle="red";
// ctx.strokestyle="red";
ctx.linewidth=;
transform(ctx,x,y,(math.pi*)/*h,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
ctx.save();//分针转动
ctx.fillstyle="blue";
ctx.linewidth=;
transform(ctx,x,y,(math.pi*)/*m,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
//秒针转动
ctx.save();
ctx.fillstyle="#";
transform(ctx,x,y,sangle,true);
sj(ctx,x,y,x-,y-,x+,y-);
ctx.restore();
//数据整理
if(s%==){
sangle=,s=,m++;
if(m==){ //每十二分 时针旋转一次
if(m!=)h++;
if(m%==)m=;
}
if(h%==)h=;
};
//*注:如果是放到外面 判断分针或时针转动 则满足条件时 都重复会运行 原因 每执行一遍 只有秒针 在时刻变动 *//
var datestring=time.getfullyear()+"年"+(time.getmonth()+)+"月"+time.getdate()+"日 "+weekday[time.getday()]+" h:"+time.gethours()+" m:"+m+" s:"+s;
document.getelementbyid("d").innerhtml=datestring;
}
//指针三角!
function sj(ctx,x,y,x,y,x,y){
//====例====
// ctx.beginpath();
// ctx.moveto(x,y);
// ctx.lineto(x,y-);
// ctx.stroke();
// ctx.beginpath();
//
// ctx.moveto(x-,y-);
// ctx.lineto(x+,y-);
// ctx.lineto(x,y--);
// ctx.fill();
ctx.beginpath();
ctx.moveto(x,y);
ctx.lineto(x,y);
ctx.stroke();
ctx.beginpath();
ctx.moveto(x,y);
ctx.lineto(x,y);
ctx.lineto(x,y);
ctx.fill();
}
//据坐标旋转
function transform(ctx,x,y,angle,b){
if(b){// 顺时针
ctx.transform(math.cos(angle), math.sin(angle),
-math.sin(angle), math.cos(angle),
x*(-math.cos(angle)) + x*math.sin(angle),
y*(-math.cos(angle)) - y*math.sin(angle))
}
}
//=====每秒执行============(执行事件自选)
window.setinterval(function(){draw()},);
// window.onload=function(){ //效果同上
// setinterval("draw()",);
// };
// ]]>
</script>