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文件获得。