Canvas Clock

这两天在看html5的canvas,实现了上面那个东西

需要注意的地方：

1.canvas的sava()和restore()理解和使用

2.canvas的translate scale rotate ..的使用，每个变化都应该清楚圆心和角度..看：http://blog.sina.com.cn/s/blog_8fab526c01015tqs.html

3.自定义旋转transform方法，实现数字的fillText

View Code

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Canvas Clock.</title><script src="jquery-1.7.1.min.js"></script>
</head>
<style type="text/css">#canvasPanel{margin:0 auto;}#canvas{display: block;}
</style>
<body>    <div id="time"><span>2013-05-11</span></div><div id="canvasPanel"><canvas id="canvas" width="300" height="300" style="border:1px solid #ccc;"></canvas></div><script type="text/javascript">window.onload = function(){clock();var timeInterval = setInterval(clock,1000);};function clock(){var now = new Date();var weekday={0:'星期日',1:'星期一',2:'星期二',3:'星期三',4:'星期四',5:'星期五',6:'星期六'};var sec = now.getSeconds();var min = now.getMinutes();var hr  = now.getHours();hr = hr>=12 ? hr-12:hr;ctx = document.getElementById('canvas').getContext("2d");ctx.save();ctx.clearRect(0,0,300,300);ctx.translate(150,150);ctx.scale(0.4,0.4);ctx.rotate(-Math.PI/2);
ctx.strokeStyle = "black";ctx.lineWidth = 8;ctx.lineCap = "round";// 时间刻度
                ctx.save(); var x = 0, y = 0,angle = Math.PI/30;ctx.rotate(Math.PI/2);    //function transform ??function transform(ctx,x,y,angle,b){if(b){ctx.transform(Math.cos(angle), Math.sin(angle),-Math.sin(angle), Math.cos(angle),x*(1-Math.cos(angle)) + x*Math.sin(angle),y*(1-Math.cos(angle)) - y*Math.sin(angle));}}for(var i=0;i<60;i++){if(i%5 == 0){ctx.font = "26px Arial";ctx.fillText(i/5 == 0 ? 12 : i/5,x-15,y-200);}transform(ctx,x,y,angle,true); }ctx.restore();ctx.save();ctx.beginPath();for(var i=0;i<12;i++){ctx.rotate(Math.PI/6);ctx.moveTo(250,0);ctx.lineTo(270,0);}ctx.stroke();ctx.restore();ctx.save();ctx.lineWidth = 5;ctx.beginPath();for(var i=0;i<60;i++){if(i%5!=0){ctx.moveTo(266,0);ctx.lineTo(270,0);}ctx.rotate(Math.PI/30);
                    }    ctx.stroke();ctx.restore();//draw the hour line
                ctx.save();ctx.rotate((Math.PI/6)*hr+(Math.PI/360)*min+(Math.PI/21600)*sec);
                    ctx.beginPath();ctx.moveTo(-20,0);ctx.lineTo(150,0);ctx.stroke();ctx.restore();//draw the min line
                ctx.save();ctx.rotate((Math.PI/30)*hr+(Math.PI/1800)*min);ctx.strokeStyle = "#fd4000";ctx.fillStyle = "#fd4000";ctx.lineWidth = 6;ctx.beginPath();ctx.moveTo(-28,0);ctx.lineTo(200,0);ctx.stroke();ctx.restore();//draw the sec line
                ctx.save();ctx.rotate((Math.PI/30)*sec);ctx.strokeStyle = "#D40000";ctx.fillStyle = "#d40000";ctx.lineWidth = 6;ctx.beginPath();ctx.moveTo(-36,0);ctx.lineTo(160,0);ctx.stroke();ctx.restore();//draw the circle
                ctx.save();ctx.lineWidth = 4;ctx.strokeStyle = "325fa2"ctx.beginPath();ctx.arc(0,0,300,0,Math.PI*2,true);ctx.stroke();ctx.restore();//draw the middle circle
                ctx.save();ctx.lineWidth = 4;ctx.strokeStyle = "325fa2";ctx.beginPath();ctx.arc(0,0,7,0,Math.PI*2,true);ctx.stroke();ctx.restore();//show time/*ctx.rotate(Math.PI/2);ctx.lineWidth = 2;ctx.fillStyle = "red";hour = now.getHours();var str = hour > 10 ? hour : ("0"+hour)+":"+(min > 10 ? min:("0"+min));ctx.font = "18px";ctx.fillText(str,150,250);ctx.lineWidth = 1;  ctx.fillText("Lgm ZJ", 150, 270); */ctx.restore();var dateString=now.getFullYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日 "+weekday[now.getDay()]+" h:"+now.getHours()+" m:"+min+" s:"+sec;$("#time span").html(dateString);}</script>
</body></html>