The seven "clocks" of JS drawing

Example: http://www.zhaojz.com.cn/demo/draw12.html

Dependency: Round

I. Definition object: PIN

        //defining a clock pointer        //Dotclock origin Point        //len pointer length        functionClockhand (Dotclock, Len, opts) { This. Points = [];  This. Dotclock =Dotclock;  This. Len =Len;  This. Currentangle = Opts.angle? (270+opts.angle): 270;//Offset Angle             This. drawed =false;  This. Type = Opts.type?opts.type: "";//pointer type, hour, minute, and second hand             This. color = Opts.color?opts.color: "darkred";//pointer Color             This. Weight = opts.weight?opts.weight:1;//pointer width        }        //Draw PointerClockHand.prototype.draw =function(){            if(! This. drawed) {                varrad = This. currentangle*math.pi/180; Calculate radians 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}); vari = 0;  while(I < This. Points.length) {Document.body.appendChild ( This. Points[i]); I++; }                 This. drawed =true; }        }        //Erase PointerClockhand.prototype._erase_ =function(){            if( This. drawed) {                vari = 0;  while(I < This. Points.length) {Document.body.removeChild ( This. Points[i]); I++; }                 This. Points = [];  This. drawed =false; }        }        //move to next positionClockHand.prototype.goNext =function(){            varInter = 0; Switch( This. Type) {             Case"HOUR": Inter= (360/(12*60*60)); break; Case"MIN": Inter= (360/(60*60)); break; Case"SEC": Inter= (360/); break;            }            if(Inter > 0){                 This. Currentangle = ( This. Currentangle+inter)%360;  This. _erase_ ();  This. Draw (); }        }

Second, the definition of the object: Clock

        //Defining Clocks        functionClock (dot, r) { This. CID =NewDate (). GetTime ();//uniquely identifies             This. dot = dot;//origin Point             This. R = r;//radius            if(!Window.myclock) {Window.myclock= {}; } window.myclock[ This. cid+ ""] = This;//Save Reference        }        //Initialize, draw dial, scale and handsClock.prototype.init =function() {drawcircle ( This. Dot, This. R, 1); varD =NewDate (); varhour =d.gethours (); varminute =d.getminutes (); varSecond =d.getseconds ();  This. Hourhand =NewClockhand ( 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 =NewClockhand ( This. Dot, This. r*0.89, {type: "MIN", Color: "darkred", Weight:2, Angle: (minute* (360/60) +second* (360/(60*60)))});  This. Secondhand =NewClockhand ( 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; }        //start WalkingClock.prototype.start =function() {setinterval ("Myclock[" + This. cid+ "']._running_ ();", 1000); } clock.prototype._running_=function(){             This. Secondhand.gonext ();  This. Minutehand.gonext ();  This. Hourhand.gonext (); }

Third, call

        //Radius        var r= 100; // origin Point        var = [Dot2];             New Clock (Dot2, R). Init (). Start ();

PS: Other methods that the above script relies on can be obtained by viewing the source code of the Web page and the JS file referenced by the download page.

The seven "clocks" of JS drawing