HTML5 绘制时钟

效果图：

测试内容

var demo=document.getElementByIdx_x_x("demo");

var cxt=demo.getContext('2d');      

function drawclock(){

cxt.clearRect(0,0,500,500);

var now=new Date();

var second=now.getSeconds();

var min=now.getMinutes();

var hour=now.getHours();

hour=hour+min/60;

min=min+second/60;

hour=hour>12?hour-12:hour;

cxt.lineWidth=10;

cxt.strokeStyle='blue';

cxt.beginPath();

cxt.arc(250,250,160,0,Math.PI,false);

cxt.arc(100,175,75,95*Math.PI/180,Math.PI*14/8,false);

cxt.arc(250,250,160,235*Math.PI/180,305*Math.PI/180,false);

cxt.arc(400,175,75,225*Math.PI/180,85*Math.PI/180,false);

  cxt.closePath();

cxt.stroke();

   cxt.fillStyle='#000000';

cxt.fill();

    cxt.beginPath();

cxt.arc(250,250,160,0,Math.PI*2,false);

  cxt.closePath();

cxt.stroke();

//径向渐变

varfillColorRadial=cxt.createRadialGradient(250,250,0,250,250,150);

 fillColorRadial.addColorStop(0,'red');

 fillColorRadial.addColorStop(0.2,'pink');

 fillColorRadial.addColorStop(0.4,'cyan');

 fillColorRadial.addColorStop(0.7,'lightyellow');

  cxt.fillStyle = fillColorRadial;

  cxt.fill();

  

for(var i=1;i<13;i++)

{

cxt.save();

cxt.translate(250,250);

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

var x=150*0.75*Math.cos(theta);  

var y=150*0.75*Math.sin(theta);

cxt.fillStyle="#000000";

cxt.font="bold 14px 微软雅黑";

cxt.textAlign="center";

cxt.textBaseline="middle";

cxt.fillText(i,x,y);

cxt.restore();

}

for(var i=1;i<=60;i++)

{

cxt.save();

cxt.translate(250,250);

var theta=(i-15)*2*Math.PI/60;  

var x=200*0.75*Math.cos(theta);  

var y=200*0.75*Math.sin(theta);

cxt.fillStyle="green";

cxt.font="bold 1px 微软雅黑";

cxt.textAlign="center";

cxt.textBaseline="middle";

cxt.fillText(i,x,y);

cxt.restore();

}

cxt.strokeStyle='#000000';

for(var i=0;i<60;i++)

{ 

if(i%5==0)

{

    cxt.lineWidth=7;

    cxt.save();

cxt.translate(250,250);

cxt.rotate(i*30*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-120);

cxt.lineTo(0,-140);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

else

{

    cxt.lineWidth=5;

    cxt.save();

cxt.translate(250,250);

cxt.rotate(i*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-130);

cxt.lineTo(0,-140);

cxt.closePath();

cxt.stroke();

cxt.restore();

}

}

//时针

    cxt.lineWidth=7;

    cxt.save();

cxt.translate(250,250);

cxt.rotate(hour*30*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-90);

cxt.lineTo(0,10);

cxt.closePath();

cxt.stroke();

cxt.restore();

//分针

cxt.lineWidth=5;

    cxt.save();

cxt.translate(250,250);

cxt.rotate(min*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-100);

cxt.lineTo(0,10);

cxt.closePath();

cxt.stroke();

cxt.restore();

//秒针

cxt.lineWidth=5; 

cxt.strokeStyle='red';

    cxt.save();

cxt.translate(250,250);

cxt.rotate(second*6*Math.PI/180);

cxt.beginPath();

cxt.moveTo(0,-100);

cxt.lineTo(0,10);

cxt.closePath();

cxt.stroke();

cxt.beginPath();

cxt.arc(0,-85,5,0,Math.PI*2,false)

cxt.closePath();

cxt.lineWidth=3; 

cxt.strokeStyle='red';

cxt.stroke();

cxt.fillStyle='cyan';

cxt.fill();

cxt.restore();

//交汇点装饰

cxt.lineWidth=3;

cxt.strokeStyle='red';

cxt.beginPath();

cxt.arc(250,250,5,0,Math.PI*2,false);

cxt.closePath();

cxt.stroke();

cxt.fillStyle='red';

cxt.fill();

}

setInterval(drawclock,1000);