JS画图之七【时钟】

样例：http://www.zhaojz.com.cn/demo/draw12.html

依赖：圆

一、定义对象：针

        //定义钟表指针        //dotClock    原点        //len    指针长度        function ClockHand(dotClock, len, opts){            this.points = [];            this.dotClock = dotClock;            this.len = len;            this.currentAngle = opts.angle?(270+opts.angle):270; //偏移角            this.drawed = false;            this.type = opts.type?opts.type:""; //指针类型，分时针、分针和秒针            this.color = opts.color?opts.color:"DarkRed"; //指针颜色            this.weight = opts.weight?opts.weight:1; //指针宽度        }        //绘制指针        ClockHand.PRototype.draw = function(){            if(!this.drawed){                var rad = this.currentAngle*Math.PI/180; //计算弧度                this.points = getLine(this.dotClock, [this.dotClock[0]+this.len*Math.cos(rad), this.dotClock[1]+this.len*Math.sin(rad)]                    ,{                    color: this.color,                    pw: this.weight,                    ph: this.weight                });                var i = 0;                while(i < this.points.length){                    document.body.appendChild(this.points[i]);                    i++;                }                this.drawed = true;            }        }        //擦除指针        ClockHand.prototype._erase_ = function(){            if(this.drawed){                var i = 0;                while(i < this.points.length){                    document.body.removeChild(this.points[i]);                    i++;                }                this.points = [];                this.drawed = false;            }        }        

二、定义对象：钟

        //定义钟表        function Clock(dot, r){            this.cid = new Date().getTime(); //唯一标识            this.dot = dot;  //原点            this.r = r;  //半径            if(!window.myClock){                window.myClock = {};            }            window.myClock[this.cid+""] = this; //保存引用        }        //初始化，画表盘、刻度和指针        Clock.prototype.init = function(){            drawCircle(this.dot, this.r, 1);            var d = new Date();            var hour = d.getHours();            var minute = d.getMinutes();            var second = d.getSeconds();            this.hourHand = new ClockHand(this.dot, this.r*0.5, {type:"HOUR",color:"BLACK",weight: 2, angle: (hour%12*(360/12)+minute*(360/(12*60))+second*(360/(12*60*60)))});            this.minuteHand = new ClockHand(this.dot, this.r*0.89, {type:"MIN",color:"DarkRed",weight: 2, angle: (minute*(360/60)+second*(360/(60*60)))});            this.secondHand = new ClockHand(this.dot, this.r*0.91, {type:"SEC",color:"RED",weight: 1, angle: (second*(360/60))});            this.hourHand.draw();            this.minuteHand.draw();            this.secondHand.draw();            return this;        }        //开始走时        Clock.prototype.start = function(){            setInterval("myClock['"+this.cid+"']._running_();",1000);        }                Clock.prototype._running_ = function(){

　　　　　　　　this.secondHand._erase_();　　　　　　　　this.minuteHand._erase_();　　　　　　　　this.minuteHand._erase_();　　　　　　　　this.init();

        }

三、调用

        //半径        var r= 100;// 原点        var dot2 = [200, 200];            new Clock(dot2, r).init().start();

PS：上述脚本所依赖的其它方法，可以通过查看网页源代码以及下载页面所引用的js文件获得。