最近在对Html5比较感兴趣，就用空闲时间做一些小例子进行练习，今天绘制一个走动的时钟，具体如下图所示：
具体思路在上图已有说明，代码如下：
<script type="text/javascript">
//绘制圆形的弧度，ctx 为绘制环境，x,y为绘制中心，r为绘制半径，st为起始弧度，end为结束弧度
function circle(ctx, x, y, r, st, end, w) {
ctx.lineWidth = w;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, r, st, end, true);
ctx.stroke();
}
//画一个白色的圆，用以覆盖
function circle0(ctx, x, y, r, st, end) {
ctx.fillStyle = "#ffffff";
ctx.beginPath();
ctx.arc(x, y, r, st, end, true);
ctx.fill();
}
function circle1(ctx, x, y, r, st, end, w) {
ctx.strokeStyle = "gray";
ctx.lineWidth = w;
ctx.beginPath();
ctx.arc(x, y, r, st, end, true);
ctx.stroke();
}
//绘制时钟用的线
function line(ctx, x1, y1, x2, y2, w) {
if (w == 1) {
ctx.strokeStyle = "red";
} else if (w == 2) {
ctx.strokeStyle = "blue";
} else {
ctx.strokeStyle = "black";
}
ctx.lineWidth = w;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
function drawClock() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
//绘制一个钟表
var cX = 300;
var cY = 200;
var radius = 100;
//绘制分与秒的刻度
for (var i = 0; i < 60; i++) {
circle(ctx, cX, cY, radius, i * 6 * Math.PI / 180, (i + 1) * 6 * Math.PI / 180, 1);
}
circle0(ctx, cX, cY, radius * 9 / 10, 0, 2 * Math.PI, true);
//绘制时刻度
for (var i = 0; i < 12; i++) {
circle(ctx, cX, cY, radius, i * 30 * Math.PI / 180, (i + 1) * 30 * Math.PI / 180, 2);
}
circle0(ctx, cX, cY, radius * 8 / 10, 0, 2 * Math.PI, true);
//外围再画一圈
circle1(ctx, cX, cY, radius * 11 / 10, 0, 2 * Math.PI, 1);
ctx.save();
ctx.fillStyle = "black";
ctx.font = "10px Arial";
//在钟表的周围画上数字
for (var i = 0; i < 12; i++) {
var fX = cX + Math.cos((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
var fY = cY + Math.sin((i + 1) * 5 * 6 * Math.PI / 180 - Math.PI / 2) * radius * 7.5 / 10;
ctx.fillText((i + 1), fX, fY);
}
var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes();
var hour = date.getHours();
hour = hour % 12; //采用12小时制
var secondX = cX + Math.cos(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
var secondY = cY + Math.sin(second * 6 * Math.PI / 180 - Math.PI / 2) * radius * 9 / 10;
var minuteX = cX + Math.cos(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
var minuteY = cY + Math.sin(minute * 6 * Math.PI / 180 - Math.PI / 2) * radius * 8 / 10;
//小时为了准确起见，应该要加上分的弧度
var hourX = cX + Math.cos(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
var hourY = cY + Math.sin(hour * 30 * Math.PI / 180 + (minute * 6 * Math.PI / 180) / 12 - Math.PI / 2) * radius * 6.5 / 10;
//画秒针，红色
line(ctx, cX, cY, secondX, secondY, 1);
//画分针，蓝色
line(ctx, cX, cY, minuteX, minuteY, 2);
//画时针，黑色
line(ctx, cX, cY, hourX, hourY, 3);
ctx.fillStyle = "black";
ctx.font = "15px Arial";
ctx.fillText("CurrentTime is : " + date.toLocaleString(), 150, 450);
ctx.save();
}
window.onload = function () {
//循环，1s一次，且要在加载完才可以开始，否则会出现找不到对象的异常
setInterval(drawClock, 1000);
}
</script>