JavaScript HTML5 canvas Drawing Clock effect (ii) _javascript tips

For H5, canvas can be said to be its most characteristic of a place, with it after we can freely in the Web page to draw a variety of graphics, do some small games ah what. Canvas the use of this label, there are a lot of tutorials on the web, there is no introduction. Today we use canvas to make a small clock. The complete code is https://github.com/wwervin72/HTML5-Clock here.

So first on this page I used two canvas, one to draw the static clock dial and the scale, the other to draw the three pointers of the clock, and then use positioning to let them overlap together. Then there is nothing to say here, the code below.

<canvas id= "Plate" >
 draw dial
</canvas>
<canvas id= "Needles" >
 Draw Hour
</canvas >

var Plate=document.getelementbyid (' Plate ');
var Needles=document.getelementbyid (' Needles ');
Needles.setattribute (' style ', ' position:absolute;top:8px;left:8px; '); Because of the chrome inside, the body's Magin value is 8px, so I'm not set to 0 here.
var cntp=plate.getcontext (' 2d ');
var cnth=needles.getcontext (' 2d ');
plate.width=800;
plate.height=500;
needles.width=800;
needles.height=500;

By the end of the preparation work, we are ready to draw the clock below. I first defined a function of the clock disk when I drew it.

 function Drawclock (cnt,radius,platelen,linewidth,numlen,numlen) {this.cnt=cnt;
  This.radius=radius;
  This.platelen=platelen;
  This.linewidth=linewidth;
  This.numlen=numlen; This.
  Numlen=numlen;
  This.getcalibcoor=function (i) {//To obtain the coordinates of the dials at both ends of Var x=200+this.radius*math.sin (6*i*math.pi/180);
  var y=200-this.radius*math.cos (6*i*math.pi/180);
  var x=200+ (This.radius-this.platelen) *math.sin (6*i*math.pi/180);

  var y=200-(This.radius-this.platelen) *math.cos (6*i*math.pi/180);
  Gets the coordinates of the minute number of Var numx=200+ (This.radius-this.platelen-this.numlen) *math.sin (6*i*math.pi/180);
  var numy=200-(This.radius-this.platelen-this.numlen) *math.cos (6*i*math.pi/180); 
  Get the coordinates of the hour number var numx=200+ (This.radius-this.platelen-this.numlen) *math.sin (6*i*math.pi/180);
  var numy=200-(This.radius-this.platelen-this.numlen) *math.cos (6*i*math.pi/180);
  return {x:x,y:y,x:x,y:y,numx:numx,numy:numy,numx:numx,numy:numy};
  };
  This.drawcalibration=function () {//Draw scale for (Var i=0,coorobj;i<60;i++) { Coorobj=this.getcalibcoor (i);
   This.cnt.beginPath ();
   This.cnt.moveTo (COOROBJ.X,COOROBJ.Y);
   This.cnt.lineTo (COOROBJ.X,COOROBJ.Y);

   This.cnt.closePath ();
   This.cnt.linewidth=this.linewidth;
   this.cnt.strokestyle= ' #ddd ';
   i%5==0&& (this.cnt.strokestyle= ' #aaa ') && (this.cnt.linewidth=this.linewidth*2);
   i%15==0&& (this.cnt.strokestyle= ' #999 ') && (this.cnt.linewidth=this.linewidth*3);

   This.cnt.stroke ();
   This.cnt.font= ' 10px Arial ';
   This.cnt.fillstyle= ' Rgba (0,0,0,.2) ';
   This.cnt.fillText (i,coorobj.numx-7,coorobj.numy+3); i%5==0&& (this.cnt.fillstyle= ' Rgba (0,0,0,.5) ') && (this.cnt.font= ' 18px Arial ') && (
  This.cnt.fillText (i/5,coorobj.numx-5,coorobj.numy+5));
 }
  }; } var clock=new drawclock (cntp,200,5,1,10,25);
 Instantiate a Dial object Clock.drawcalibration ();

The most important part of this is to get the coordinates of the scale and the number plotted. I put the starting point of the drawing scale on the edge of the dial, then subtract the length of the scale from the dial's radius, and I can get the position of the end point of the scale, and then use the angle and trigonometric functions to get the coordinates of the two points. Finally, we can draw the scale of the dial. The same is true of the numbers on the dial below. I'm here. The center of the dial is located at (200,200) here. Here we have drawn a static clock dial.

Below I also define a constructor that draws the clock pointer.

function Clockneedle (cnt,r,linewidth,strokestyle,linecap,obj) {this.
  R=r;
  this.cnt=cnt;
  This.linewidth=linewidth;
  This.strokestyle=strokestyle;
  This.linecap=linecap;
  This.obj=obj; This.getneedlecoor=function (i) {var x=200+this. R*0.8*math.sin (i); The coordinates of the starting point Var y=200-this.

  R*0.8*math.cos (i); var x=200-20*math.sin (i);
  The coordinates of the endpoint Var y=200+20*math.cos (i);
  return {x:x,y:y,x:x,y:y};
  };
  This.drawneedle=function () {var d=new Date (). GetTime ();
  var angle;
   Switch (this.obj) {case 0:angle= (d/3600000%24+8)/12*360*math.pi/180;
   Break
   Case 1:angle=d/60000%60/60*360*math.pi/180;
   Break
   Case 2:angle=d/1000%60/60*360*math.pi/180;
  Break
  } var coorobj=this.getneedlecoor (angle);
  This.cnt.beginPath ();
  This.cnt.moveTo (COOROBJ.X,COOROBJ.Y); This.cnt.lineTo (coorobj. X,coorobj.
  Y);

  This.cnt.closePath ();
  This.cnt.linewidth=this.linewidth;
  This.cnt.strokestyle=this.strokestyle;
  This.cnt.linecap=this.linecap;
  This.cnt.stroke (); }
 }
 

Here are two places to say: 1, when we get the number of milliseconds for the current time, and then convert to an hour, the 24 modulo calculates the number of hours of the day, and here you need to add 8. 2, if you want to use LineCap this attribute, then the above when setting the path, do not use Closepath ().

Here we also need a way to draw the pointer, and let the pointer look like it can rotate:

function Draw () {
  cnth.clearrect (0,0,needles.width,needles.height);
  var mzneedle=new clockneedle (cnth,200,1, ' Rgba (0,0,0,.5) ', ' Round ', 2);
  The last parameter 0 represents the draw hour hand, 1 draws the minute hand, 2 draws the second hand
  var fzneedle=new clockneedle (cnth,80,3, ' Rgba (0,0,0,.4) ', ' round ', 0);
  var szneedle=new clockneedle (cnth,140,2, ' Rgba (0,0,0,.3) ', ' Round ', 1);
  Mzneedle.drawneedle ();
  Fzneedle.drawneedle ();
  Szneedle.drawneedle ();
  Cnth.arc (200,200,5,0,2*MATH.PI);
  Cnth.fillstyle= ' Rgba (0,0,0,.5) ';
  Cnth.fill ();
 }
 SetInterval (draw,1);

Attached below is a picture of the clock:

The above is the entire content of this article, I hope to help you learn.