用canvas模仿iPhone时钟
[color=darkred][/color]自学前段开发也有一个月了，最近在学html5中的新标签“canvas”，发现canvas不仅仅是一个标签，更是一个能够制作动画效果的画布，于是模仿iPhone中时钟的效果，自己做了一个网页版的时钟，还只是一个雏形，以后还会增加一些自己的创意“抛弃圆形表盘”，“数字用图片或其它形状呈现”，“时针、分钟、秒针也用其它形状代替”，以我现在的基础也许还没有能力做出来，不过我会努力的。
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>炫丽的倒计时效果</title>
</head>
<body>
<canvasid="canvas"style="display:block;margin:50pxauto;">
您的浏览器不支持canvas绘图，请更换浏览器。
</canvas>
<scripttype="text/javascript">
varWINDOW_WIDTH=400;
varWINDOW_HEIGHT=400;
window.onload=function(){
varcanvas=document.getElementById("canvas");
if(canvas.getContext("2d")){
varcontext=canvas.getContext("2d");
}
canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT;
render(context);
};
functionnumberToDegree(num){
return((num*6-90)*2*Math.PI/360);
}
functioncomputePositionByLenghtAndDegree(len,deg){
return{
x:len*Math.cos(deg),
y:len*Math.sin(deg)
}
}
functionrender(cxt){
varmyDate=newDate();
varhour=myDate.getHours()%12;
varminute=myDate.getMinutes();
varsecond=myDate.getSeconds();
//cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
//绘制表盘
cxt.fillstyle="#000000";
cxt.beginPath();
cxt.translate(200,200);
cxt.arc(0,0,199,0,2*Math.PI,true);
cxt.closePath();
cxt.fill();
//绘制时钟上面的1~12数字。
cxt.fillStyle='#ffffff';
cxt.font="60px'BodoniMT'";
cxt.textalign="center";
cxt.textBaseline="middle";
cxt.fillText("12",0,-150);
cxt.fillText("1",150*Math.cos(Math.PI/3),-150*Math.sin(Math.PI/3));
cxt.fillText("2",150*Math.cos(Math.PI/6),-150*Math.sin(Math.PI/6));
cxt.fillText("3",150,0);
cxt.fillText("4",150*Math.cos(Math.PI/6),150*Math.sin(Math.PI/6));
cxt.fillText("5",150*Math.cos(Math.PI/3),150*Math.sin(Math.PI/3));
cxt.fillText("6",0,150);
cxt.fillText("7",-150*Math.cos(Math.PI/3),150*Math.sin(Math.PI/3));
cxt.fillText("8",-150*Math.cos(Math.PI/6),150*Math.sin(Math.PI/6));
cxt.fillText("9",-150,0);
cxt.fillText("10",-150*Math.cos(Math.PI/6),-150*Math.sin(Math.PI/6));
cxt.fillText("11",-150*Math.cos(Math.PI/3),-150*Math.sin(Math.PI/3));
//绘制时针，分针，秒针。
varhourDegree=numberToDegree(hour*5+Math.floor(minute/12));
varminuteDegree=numberToDegree(minute);
varsecondDegree=numberToDegree(second);
varhourBeginPot=computePositionByLenghtAndDegree(8,(hourDegree+Math.PI));
varhourEndPot=computePositionByLenghtAndDegree(80,hourDegree);
varminuteBeginPot=computePositionByLenghtAndDegree(10,minuteDegree+Math.PI);
varminuteEndPot=computePositionByLenghtAndDegree(100,minuteDegree);
varsecondBeginPot=computePositionByLenghtAndDegree(15,secondDegree+Math.PI);
varsecondEndPot=computePositionByLenghtAndDegree(120,secondDegree);
cxt.strokestyle="#fff";
cxt.beginPath();
cxt.moveTo(hourBeginPot.x,hourBeginPot.y);
cxt.lineTo(hourEndPot.x,hourEndPot.y);
cxt.lineWidth=6;
cxt.closePath();
cxt.stroke();
cxt.strokestyle="#fff";
cxt.beginPath();
cxt.moveTo(minuteBeginPot.x,minuteBeginPot.y);
cxt.lineTo(minuteEndPot.x,minuteEndPot.y);
cxt.lineWidth=3;
cxt.closePath();
cxt.stroke();
//绘制秒针
cxt.strokestyle="#ff0000";
cxt.beginPath();
cxt.moveTo(secondBeginPot.x,secondBeginPot.y);
cxt.lineTo(secondEndPot.x,secondEndPot.y);
cxt.lineWidth=2;
cxt.closePath();
cxt.stroke();
cxt.translate(-200,-200);
setTimeout(
function(){render(cxt)}
,50);
}
</script>
</body>
</html>