HTML5足够强大实现很多功能，画一个时钟只是一个小玩意。图片指针用ctx的drawImage可以实现。至于兼容性问题，网上的解决方案已经很多了。这个东东是用来玩的，不是用来做应用的，学习下canvas API。 先给大家展示效果图 实现代码 复制代码代码如下: <br />// <![CDATA[ <br /> var time = new Date(); <br /> var h = time.getHours(); <br /> var m = time.getMinutes(); <br /> var s = time.getSeconds(); <br /> var weekday={:'星期日',:'星期一',:'星期二',:'星期三',:'星期四',:'星期五',:'星期六'}; <br /> h=h>?(h-)*+parseInt(m/):h*+parseInt(m/); //时针 初始位置 <br /> //===================================== <br /> var x=,y=,sAngle=; //x y 原点 秒针角度变量 <br /> function draw() <br /> { <br /> var c=document.getElementById("myCanvas"); <br /> var ctx=c.getContext("d"); <br /> ctx.clearRect(,,c.width,c.height); <br /> s++;//秒针 <br /> //背景 <br /> ctx.fillStyle = '#eee' // Make changes to the settings <br /> ctx.globalAlpha = .; <br /> ctx.fillRect(,,c.width,c.height); // Draw a rectangle with new settings <br /> //===填充(表明)原点=== <br /> ctx.beginPath(); <br /> ctx.arc(x,y,,,true); <br /> ctx.fill(); <br /> ctx.closePath(); <br /> var grd=ctx.createLinearGradient(x,y,,); <br /> grd.addColorStop(,"#FF"); <br /> grd.addColorStop(.,"#FF"); <br /> grd.addColorStop(,"#FF"); <br /> ctx.fillStyle=grd; <br /> ctx.font = "pt Arial"; <br /> ctx.fillText("html",,); <br /> ctx.save(); <br /> // 时间刻度 <br /> for(var i=;i<;i++) <br /> { <br /> var angle=(Math.PI*)/; <br /> ctx.beginPath(); <br /> var b=i==||i==||i==||i== <br /> if(i%==){ <br /> if(b){ <br /> ctx.fillStyle="red"; <br /> radius=; <br /> } <br /> else{ <br /> ctx.fillStyle="blue"; <br /> radius=.; <br /> } <br /> ctx.font="px Arial"; <br /> ctx.fillText(i/==?:i/,x-,y-); //x大-右 小-左 y大小 数字刻度 <br /> } <br /> else <br /> { <br /> ctx.fillStyle="#"; <br /> radius=; <br /> } <br /> if(s==i)radius=radius+; <br /> ctx.arc(x,y-,radius,,true); <br /> ctx.fill(); <br /> transform(ctx,x,y,angle,true); <br /> } <br /> ctx.restore(); <br /> //========================== <br /> sAngle=(Math.PI*)/*s; //秒度 <br /> ctx.save(); //时针 <br /> ctx.fillStyle="red"; <br /> // ctx.strokeStyle="red"; <br /> ctx.lineWidth=; <br /> transform(ctx,x,y,(Math.PI*)/*h,true); <br /> sj(ctx,x,y,x-,y-,x+,y-); <br /> ctx.restore(); <br /> ctx.save();//分针转动 <br /> ctx.fillStyle="blue"; <br /> ctx.lineWidth=; <br /> transform(ctx,x,y,(Math.PI*)/*m,true); <br /> sj(ctx,x,y,x-,y-,x+,y-); <br /> ctx.restore(); <br /> //秒针转动 <br /> ctx.save(); <br /> ctx.fillStyle="#"; <br /> transform(ctx,x,y,sAngle,true); <br /> sj(ctx,x,y,x-,y-,x+,y-); <br /> ctx.restore(); <br /> //数据整理 <br /> if(s%==){ <br /> sAngle=,s=,m++; <br /> if(m==){ //每十二分 时针旋转一次 <br /> if(m!=)h++; <br /> if(m%==)m=; <br /> } <br /> if(h%==)h=; <br /> }; <br /> //*注:如果是放到外面 判断分针或时针转动 则满足条件时 都重复会运行 原因 每执行一遍 只有秒针 在时刻变动 *// <br /> var dateString=time.getFullYear()+"年"+(time.getMonth()+)+"月"+time.getDate()+"日 "+weekday[time.getDay()]+" h:"+time.getHours()+" m:"+m+" s:"+s; <br /> document.getElementById("d").innerHTML=dateString; <br /> } <br /> //指针三角! <br /> function sj(ctx,x,y,x,y,x,y){ <br /> //====例==== <br /> // ctx.beginPath(); <br /> // ctx.moveTo(x,y); <br /> // ctx.lineTo(x,y-); <br /> // ctx.stroke(); <br /> // ctx.beginPath(); <br /> // <br /> // ctx.moveTo(x-,y-); <br /> // ctx.lineTo(x+,y-); <br /> // ctx.lineTo(x,y--); <br /> // ctx.fill(); <br /> ctx.beginPath(); <br /> ctx.moveTo(x,y); <br /> ctx.lineTo(x,y); <br /> ctx.stroke(); <br /> ctx.beginPath(); <br /> ctx.moveTo(x,y); <br /> ctx.lineTo(x,y); <br /> ctx.lineTo(x,y); <br /> ctx.fill(); <br /> } <br /> //据坐标旋转 <br /> function transform(ctx,x,y,angle,b){ <br /> if(b){// 顺时针 <br /> ctx.transform(Math.cos(angle), Math.sin(angle), <br /> -Math.sin(angle), Math.cos(angle), <br /> x*(-Math.cos(angle)) + x*Math.sin(angle), <br /> y*(-Math.cos(angle)) - y*Math.sin(angle)) <br /> } <br /> } <br /> //=====每秒执行============(执行事件自选) <br /> window.setInterval(function(){draw()},); <br /> // window.onload=function(){ //效果同上 <br /> // setInterval("draw()",); <br /> // }; <br /> // ]]> <br />
