php实现钟表,用html5实现一个简单的钟表外观

html5已经出来好长时间了，但仍然有不多小伙伴们不太懂，下面小编就来用html5实现一个简单的钟表外观

#myCanvas{border:3px solid blue;}

window.onload = function()

{

var mycanvas = document.getElementById("myCanvas");

var context = mycanvas.getContext("2d");

context.lineWidth = 2;

context.strokeStyle = "blue";

context.fillStyle = "blue";

context.arc(250,200,5,0,Math.PI*2,true);

context.fill();

context.beginPath();

context.arc(250,200,150,0,Math.PI*2,true);

context.stroke();

context.translate(250,200);

context.rotate(-Math.PI/2);

context.save();

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

{

if(i % 5 == 0)

{

context.fillRect(130,0,20,5);

context.fillText((i/5 == 0?12:i/5),120,5);

}

else

{

context.fillRect(140,0,10,2)

}

context.rotate(Math.PI/30);//360°每6度旋转一次

}

context.fillRect(0,-2,90,3);

context.stroke();

}

效果图