首页 > 代码库 > 用canvas模仿iPhone时钟
用canvas模仿iPhone时钟
自学前段开发也有一个月了，最近在学html5中的新标签“canvas”，发现canvas不仅仅是一个标签，更是一个能够制作动画效果的画布，于是模仿iPhone中时钟的效果，自己做了一个网页版的时钟，还只是一个雏形，以后还会增加一些自己的创意“抛弃圆形表盘”，“数字用图片或其它形状呈现”，“时针、分钟、秒针也用其它形状代替”，以我现在的基础也许还没有能力做出来，不过我会努力的。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>炫丽的倒计时效果</title>
</head>
<body>
<canvas id="canvas" style="display: block; margin:50px auto;">
您的浏览器不支持canvas绘图，请更换浏览器。
</canvas>
<script type="text/javascript">
var WINDOW_WIDTH=400;
var WINDOW_HEIGHT=400;
window.onload=function(){
var canvas=document.getElementById("canvas");
if(canvas.getContext("2d")){
var context=canvas.getContext("2d");
}
canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT;
render(context);
};
function numberToDegree(num){
return ((num*6-90)*2*Math.PI/360);
}
function computePositionByLenghtAndDegree(len,deg){
return {
x:len*Math.cos(deg),
y:len*Math.sin(deg)
}
}
function render(cxt){
var myDate=new Date();
var hour=myDate.getHours()%12;
var minute=myDate.getMinutes();
var second=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 ‘Bodoni MT‘";
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));
//绘制时针，分针，秒针。
var hourDegree=numberToDegree(hour*5+Math.floor(minute/12));
var minuteDegree=numberToDegree(minute);
var secondDegree=numberToDegree(second);
var hourBeginPot=computePositionByLenghtAndDegree(8,(hourDegree+Math.PI));
var hourEndPot=computePositionByLenghtAndDegree(80,hourDegree);
var minuteBeginPot=computePositionByLenghtAndDegree(10,minuteDegree+Math.PI);
var minuteEndPot=computePositionByLenghtAndDegree(100,minuteDegree);
var secondBeginPot=computePositionByLenghtAndDegree(15,secondDegree+Math.PI);
var secondEndPot=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>
用canvas模仿iPhone时钟