总之新Blog入驻以后，又开始*惯，到处折腾自定义的空间，放些东西。
想起以前大一的时候做过一个Javascript的时间显示器，现在想做一个时钟，当然现在老奸巨猾，会先去看一看有前辈写过没。
前辈在此：html5 canvas js(时钟) from kim_zh
感觉他写的有点大，颜色有点多，所以我调整了一下，更适合cnblog的侧边栏，另外去掉了秒针，调整了一些宽度。
<canvas id = "clock" width = "200px" height = "200px">
您的浏览器已过时，请更新！
</canvas> <script type = "text/javascript">
var clock = document.getElementById("clock");
var cxt = clock.getContext("2d");
function drawClock(x) {
var y = x / 2; var r = (x - 50) / 2;
var x1 = r - 10; var x2 = r - 20;
var x3 = r - 30; var x4 = r - 40;
var x5 = r - 50;
//清除画布
cxt.clearRect(0, 0, x, x); var now = new Date;
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours(); //解决时针的问题：1、小时之间 2、19:59:30s
hour += min / 60;
hour = hour > 12 ? hour - 12 : hour; //时刻度
for (var i = 0; i < 12;i++ ) {
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = "#000";
cxt.translate(y, y);
cxt.rotate(i*30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x1); cxt.lineTo(0, -x2);
cxt.closePath();
cxt.stroke(); cxt.restore();
}
//分刻度
for (var i = 0; i < 36; i++) {
cxt.save();
cxt.lineWidth = 1;
cxt.strokeStyle = "#000";
cxt.translate(y, y);
cxt.rotate(i * 10 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x1); cxt.lineTo(0, -x2);
cxt.closePath();
cxt.stroke(); cxt.restore();
}
//时针
cxt.save();
cxt.lineWidth = 2;
cxt.strokeStyle = "#000";
cxt.translate(y, y);
cxt.rotate(hour * 30 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x5); cxt.lineTo(0, 15);
cxt.closePath();
cxt.stroke(); cxt.restore();
//分针
cxt.save();
cxt.lineWidth = 1;
cxt.strokeStyle = "#000";
cxt.translate(y, y);
cxt.rotate(min * 6 * Math.PI / 180);
cxt.beginPath();
cxt.moveTo(0, -x4); cxt.lineTo(0, 18);
cxt.closePath();
cxt.stroke(); cxt.restore();
}
//行走
drawClock(200);
setInterval("drawClock(200)", 60000);
</script>