HTML5 Canvas to draw 24 word mantra clocks

Code:

<! DOCTYPE html>the text indicates that your browser does not support HTML5</canvas> </body>functionDraw () {varCanvas=document.getelementbyid (' Mycanvus '); Canvas.width=400; Canvas.height=400; Context=canvas.getcontext (' 2d '); Context.translate (200,200); Clock=NewClock (200);    Clock.init (); Animate ();};varcontext;varclock;functionAnimate () {Context.clearrect (-200,-200,400,400);//Clear ScreenCLOCK.PAINTBG (context);    Clock.paintscale (context);    Clock.paintpointers (context); if(true){        //let the browser determine the frame rate itselfWindow.requestanimationframe (animate); }}//Watch ClassfunctionClock (RADIUS) { This. radius=radius;  This. img;  This. init=function(){         This. img=NewImage ();  This. img.src= "Bg.jpg"; }    //Painting Background     This. paintbg=function(CTX) {ctx.drawimage ( This. img,0,0,400,400,-200,-200,400,400);    }; //Draw a scale     This. paintscale=function(CTX) {vararr=["Prosperity", "democracy", "Civilization", "Harmony", "freedom", "equality", "justice", "rule of law", "patriotism", "devotion", "honesty", "kindness"]; varOffset=16;        Ctx.save (); Ctx.rotate (Getrad (-94.5));  for(vari=0;i<60;i++){            varDegree=i*6; varX= ( This. Radius-offset) *Math.Cos (Getrad (degree)); varY= ( This. Radius-offset) *Math.sin (Getrad (degree)); if((i% 5) ==0) {ctx.save (); varX1= ( This. radius-20) *Math.Cos (Getrad (degree)); varY1= ( This. radius-20) *Math.sin (Getrad (degree));                Ctx.translate (X1,Y1); Ctx.rotate (Getrad (degree+96)); Ctx.font= "Bold 16px Arial"; Ctx.fillstyle=getcolor (I/5); Ctx.filltext (arr[i/5],0,0);Ctx.restore ();    }} ctx.restore ();    }; //Draw Pointer     This. paintpointers=function(CTX) {varDate =NewDate (); varHour=date.gethours (); varMinute=date.getminutes (); varSecond=date.getseconds (); Ctx.font= "Bold 12px Arial"; Ctx.fillstyle= "Navy"; Ctx.filltext (Hour+ ":" +minute+ ":" +second,-20,-120); varAngles=second*6; varAnglem=minute*6; varangleh=hour*30+anglem/360*30;Context.save (); Context.rotate (Getrad (-90)); varx, y; Context.linewidth=0.5; X=( This. radius-2) *Math.Cos (Getrad (angles)); Y=( This. radius-2) *Math.sin (Getrad (angles)); Ctx.strokestyle= "BLACK";        Ctx.beginpath (); Ctx.moveto (-X/3,-Y/3);        Ctx.lineto (x, y);        Ctx.stroke ();        Ctx.closepath (); Context.linewidth=1.5; X=( This. radius-8) *Math.Cos (Getrad (Anglem)); Y=( This. radius-8) *Math.sin (Getrad (Anglem)); Ctx.strokestyle= "Yellow";        Ctx.beginpath (); Ctx.moveto (0, 0);        Ctx.lineto (x, y);        Ctx.stroke ();        Ctx.closepath (); Context.linewidth=2; X=( This. radius-25) *Math.Cos (Getrad (Angleh)); Y=( This. radius-25) *Math.sin (Getrad (Angleh)); Ctx.strokestyle= "Maroon";        Ctx.beginpath (); Ctx.moveto (0, 0);        Ctx.lineto (x, y);        Ctx.stroke ();        Ctx.closepath ();        Context.restore (); Ctx.fillstyle= "BLACK"; Ctx.arc (0,0,2.5,0,math.pi*2,false);    Ctx.fill (); };}//General function: Angle to get radiansfunctionGetrad (degree) {returnDegree/180*math.pi;}//general function: Get colorfunctionGetColor (index) {if(index==0){        return"Green"; }Else if(index==1){        return"Silver"; }Else if(index==2){        return"Lime"; }Else if(index==3){        return"Gray"; }Else if(index==4){        return"White"; }Else if(index==5){        return"Yellow"; }Else if(index==6){        return"Maroon"; }Else if(index==7){        return"Navy"; }Else if(index==8){        return"Red"; }Else if(index==9){        return"Blue"; }Else if(index==10){        return"Purple"; }Else if(index==11){        return"Teal"; }Else if(index==12){        return"Fuchsia"; }Else if(index==13){        return"Aqua"; }Else if(index==14){        return"Black"; }}// -</script>

Code Download:

Https://files.cnblogs.com/files/xiandedanteng/clock20170926.rar

HTML5 Canvas to draw 24 word mantra clocks