JavaScript canvas时钟

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>body {margin: 0; padding: 0;}</style>
<title>canvas时钟</title>
<canvas id="c"></canvas>
<script>
var a = 1;
$(function () {
    var c = document.getElementById('c'), css1compat = document.compatMode == 'CSS1Compat';
    $(window).resize(function () {
        c.width = document[css1compat ? 'documentElement' : 'body'].clientWidth;
        c.height = document[css1compat ? 'documentElement' : 'body'].clientHeight;
    }).trigger('resize');
    var context = c.getContext('2d');
    function clock(radius, rx, ry) {
        this.rx = rx; this.ry = ry; this.radius = radius; this.pi = Math.PI / 180;
        this.drawUI();//绘制仪表盘
        var arc = 0,  me = this;
        function move() {//时钟
            context.clearRect(rx - radius - 1, ry - radius - 1, radius * 2 + 2, radius * 2 + 2);
            context.fillStyle = '#f00';
            var d = new Date(), v = d.getHours();
            me.drawUI();
            me.drawHour(v > 12 ? v - 12 : v,d.getMinutes());
            me.drawMinuteSecond(d.getMinutes(),1.5);
            me.drawMinuteSecond(d.getSeconds(),1.25);
        }
        move();
        setInterval(move, 1000);
    }
    clock.prototype.drawHour = function (v, m) {
        var arc = (270 + v * 30 + Math.floor(m / 12) * 6) * this.pi;
        var x = Math.ceil(Math.cos(arc) * (this.radius /2)) + this.rx, y = Math.ceil(Math.sin(arc) * (this.radius/ 2)) + this.ry;
        this.drawLine(x, y);
    };
    clock.prototype.drawMinuteSecond = function (v,l) {
        var arc = (270 + v * 6) * this.pi;
        var x = Math.ceil(Math.cos(arc) * (this.radius /l)) + this.rx, y = Math.ceil(Math.sin(arc) * (this.radius/ l)) + this.ry;
        this.drawLine(x, y);
    }
    clock.prototype.drawLine = function (x, y) {
        context.beginPath();
        context.moveTo(this.rx, this.ry);
        context.lineTo(x, y);
        context.closePath();
        context.stroke();
    }
    clock.prototype.drawUI = function () {
        context.textBaseline = 'middle';
        context.font = '13px Arial'
        context.fillStyle = '#f00';
        var arrRD = [10, 10, 10, 10, 8, 7, 6, 4, 3, 4, 7, 10];
        var step = 30 * this.pi, startArc = 300 * this.pi;
        for (var i = 1; i <= 12; i++) {
            this.drawNumber(startArc, i, this.radius - arrRD[i - 1]);
            startArc += step;
        }
        context.fillRect(this.rx - 2, this.ry - 2, 5, 5);//圆心
        context.beginPath();
        context.arc(this.rx, this.ry, this.radius, 0, 2 * Math.PI);
        context.closePath();
        context.stroke();
    }
    clock.prototype.drawNumber = function (arc, number, radius) {
        var x, y;
        //通过三角函数得到x,y偏移位置
        x = Math.cos(arc) * radius;
        y = Math.sin(arc) * radius;
        //相对圆心计算
        x += this.rx; y += this.ry;
        context.fillText(number, x, y);
    }
    new clock(100, 150, 150);
    new clock(100, 400, 150);
});
</script>