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>
浙公网安备 33010602011771号