html5星期,HTML5 时钟

/p>

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

xmlns="http://www.w3.org/1999/xhtml">

content="text/html; charset=utf-8" />

HTML5实现时钟

window.οnlοad=function(){

var

ctx=document.getElementByIdx_x("mycanvas").getContext("2d");

var mycanvas=document.getElementByIdx_x("mycanvas");

var cwidth=200;

var cheight=200;

ctx.translate(cwidth/2+40,cheight/2-25);  //将基点移动到中心

var len=cwidth/2;

//alert("hi");

function drawWatch(){

ctx.clearRect(-cwidth/2,-cheight/2,cwidth,cheight);

var tlen=len*0.65;  //画数字

ctx.font="14px 'Arial";

ctx.fillStyle="#000";

ctx.textAlign="center";

ctx.textBaseline="middle";

for(var i=0;i<12;i++){

var tag1=Math.PI*2*(3-i)/12;

var tx=tlen*Math.cos(tag1);

var ty=-tlen*Math.sin(tag1);

if(i==0) ctx.fillText(12,tx,ty);

else

ctx.fillText(i,tx,ty);

}

var d=new Date();

var h=d.getHours();

var m=d.getMinutes();

var s=d.getSeconds();

if(h>12) h=h-12;

//绘制时针

var angle1=Math.PI*2*(3-(h+m/60))/12;

var length1=len*0.3;

var width1=5;

var color1="#000";

drawHand(angle1,length1,width1,color1);

//绘制分针

var angle2=Math.PI*2*(15-(m+s/60))/60;

var width2=3;

var length2=len*0.45;

var color2="#555555";

drawHand(angle2,length2,width2,color2);

//绘制秒针

var angle3=Math.PI*2*(15-s)/60;

var length3=len*0.55;

var width3=1;

var color3="#aa0000";

drawHand(angle3,length3,width3,color3);

}

function drawHand(angle,len,width,color){

var x=len*Math.cos(angle);

var y=-len*Math.sin(angle);

ctx.strokeStyle=color;

ctx.lineWidth=width;

ctx.lineCap="round"; // 把针尖设置为圆形

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(x,y);

ctx.stroke();

}

setInterval(drawWatch,1000);

}