<html>
<head>
<title>时钟</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script type="text/javascript">
function Clockdraw()
{
var canvas = document.getElementById("clock");
if (canvas.getContext)
{
var time = new Date ()
sec=Math.PI*time.getSeconds()/30
min=Math.PI*time.getMinutes()/30
hr =Math.PI*((time.getHours()*60)+time.getMinutes())/360
var ctx = canvas.getContext('2d');
ctx.clearRect(0,0,244,241);//将一块区域清空
//绘制时针
ctx.fillStyle = "rgb(192,192,192)"; //设置填充色
ctx.beginPath();//开始绘制路径
ctx.moveTo(Math.sin(hr-1.5)*2+122 , -Math.cos(hr-1.5)*2+120);//将画笔移动到第一个点上
ctx.lineTo(Math.sin(hr-0.05)*50+122 , -Math.cos(hr-0.05)*50+120);//移动到指针末端的一个点上
ctx.lineTo(Math.sin(hr+0.05)*50+122 , -Math.cos(hr+0.05)*50+120);//移动到指针末端的一个点上
ctx.lineTo(Math.sin(hr+1.5)*2+122 , -Math.cos(hr+1.5)*2+120);//将画笔移动到最后一个点上
ctx.closePath();//封闭路径，这条语句可有可无
ctx.fill();//填充
//绘制分针
ctx.beginPath();
ctx.moveTo(Math.sin(min-1.5)*2+122 , -Math.cos(min-1.5)*2+120);//将画笔移动到第一个点上
ctx.lineTo(Math.sin(min-0.04)*70+122 , -Math.cos(min-0.04)*70+120);//移动到指针末端的一个点上
ctx.lineTo(Math.sin(min+0.04)*70+122 , -Math.cos(min+0.04)*70+120);//移动到指针末端的一个点上
ctx.lineTo(Math.sin(min+1.5)*2+122 , -Math.cos(min+1.5)*2+120);//将画笔移动到最后一个点上
ctx.fill();
//绘制秒针
ctx.fillStyle = "rgb(128,255,0)"; //设置填充色
ctx.beginPath();
ctx.moveTo(Math.sin(sec-1.5)*1+122 , -Math.cos(sec-1.5)*1+120);//将画笔移动到第一个点上
ctx.lineTo(Math.sin(sec-0.01)*90+122 , -Math.cos(sec-0.01)*90+120);//移动到指针末端的一个点上
ctx.lineTo(Math.sin(sec+0.01)*90+122 , -Math.cos(sec+0.01)*90+120);//移动到指针末端的一个点上
ctx.lineTo(Math.sin(sec+1.5)*1+122 , -Math.cos(sec+1.5)*1+120);//将画笔移动到最后一个点上
ctx.fill();
}
}
document.write("<canvas id='clock' width='244' height='241' style='background-image:url(\"http://library2.usask.ca/~fichter/images/blog/firefoxlogo.png\");position:fixed;top:10px;right:10px;'>");
setInterval('Clockdraw()',1000);
</script>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号