<!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>