用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>

相关推荐