<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Clock</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript">
var Clock = function () {
var canvas = document.getElementById("canvas");
this.context = canvas.getContext("2d"),
this.FONT_HEIGHT = 15;
this.context.font = this.FONT_HEIGHT + "px Arial";
canvas.width = 500;
canvas.height = 500;
this.MARGIN = 35;
this.RADIUS = canvas.width / 2 - this.MARGIN;
}
Clock.prototype.draw = function () {
//清除绘画
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
this.circle();
this.numbers();
this.center();
this.hands();
}
Clock.prototype.circle = function () {
this.context.beginPath();
this.context.arc(canvas.width / 2, canvas.height / 2, this.RADIUS, 0, Math.PI * 2, true);
this.context.stroke();
};
Clock.prototype.numbers = function () {
var _ = this;
var NUMBER_SPACING = 20;
var HAND_RADIUS = this.RADIUS + NUMBER_SPACING;
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].forEach(function (i) {
var angle = Math.PI / 6 * (i - 3);
var width = _.context.measureText(i).width;
_.context.fillText(i,
canvas.width / 2 + Math.cos(angle) * HAND_RADIUS - width / 2,
canvas.height / 2 + Math.sin(angle) * HAND_RADIUS + _.FONT_HEIGHT / 3);
});
}
Clock.prototype.center = function () {
this.context.beginPath();
this.context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
this.context.stroke();
}
Clock.prototype.hands = function () {
var date = new Date, hour = date.getHours();
hour = hour > 12 ? hour - 12 : hour;
this.hand(hour * 5 + 5 * date.getMinutes() / 60, true, 50);
this.hand(date.getMinutes(), false, 50);
this.hand(date.getSeconds(), false, 0);
}
Clock.prototype.hand = function (loc, isHour, length) {
var HAND_TRUNCATION = canvas.width / 25;
var HOUR_HAND_TRUNCATION = canvas.width / 10;
var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2;
var radius = isHour ? this.RADIUS - HAND_TRUNCATION - HOUR_HAND_TRUNCATION : this.RADIUS - HAND_TRUNCATION;
radius -= length
this.context.moveTo(canvas.width / 2, canvas.height / 2);
this.context.lineTo(canvas.width / 2 + Math.cos(angle) * radius, canvas.height / 2 + Math.sin(angle) * radius);
this.context.stroke();
}
var clock = new Clock();
window.setInterval(function () {
clock.draw();
}, 1000);
</script>
</body>
</html>
