Effet d'horloge de dessin sur toile JavaScript html5 (2)_compétences javascript

Pour H5, le canevas peut être considéré comme sa caractéristique la plus distinctive. Avec lui, nous pouvons librement dessiner divers graphiques sur la page Web, créer de petits jeux, etc. Il existe de nombreux tutoriels sur l’utilisation de la balise canvas sur Internet, je ne les présenterai donc pas ici. Aujourd'hui, nous allons utiliser de la toile pour fabriquer une petite horloge. Le code complet est icihttps://github.com/wwervin72/HTML5-Clock.

Tout d'abord, j'ai utilisé deux toiles sur cette page, une pour dessiner le cadran et les échelles de l'horloge statique, et l'autre pour dessiner les trois aiguilles de l'horloge, puis j'ai utilisé le positionnement pour les faire se chevaucher. Alors il n'y a rien à dire ici, le code est joint ci-dessous.

<canvas id="plate">
 画表盘
</canvas>
<canvas id="needles">
 画时针
</canvas>

var plate=document.getElementById('plate');
var needles=document.getElementById('needles');
needles.setAttribute('style','position:absolute;top:8px;left:8px;'); //这里因为chrome里面，body的magin值为8px，所以我这里就没设为0了。
var cntP=plate.getContext('2d');
var cntH=needles.getContext('2d');
plate.width=800;
plate.height=500;
needles.width=800;
needles.height=500;

Maintenant que les préparatifs sont terminés, nous sommes prêts à tirer l'heure. J'ai d'abord défini un constructeur qui dessine le cadran de l'horloge.

 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){ 
  //获得表盘刻度两端的坐标
  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);

  // 获得分钟数字的坐标
  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);
  //获得小时数字的坐标
  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(){ //画刻度
  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); //实例化一个表盘对象
　　　　　　clock.drawCalibration();

La partie la plus importante ici devrait être d'obtenir les coordonnées de l'échelle et du dessin numérique. J'ai placé le point de départ de l'échelle sur le bord du cadran, puis j'ai soustrait la longueur de l'échelle du rayon du cadran pour obtenir l'emplacement du point final de l'échelle, puis j'ai utilisé des angles et des fonctions trigonométriques pour obtenir le coordonnées des deux points. Enfin, vous pouvez dessiner l'échelle du cadran. La même méthode est utilisée pour dessiner les chiffres sur le cadran ci-dessous. Le centre du cadran est ici placé à (200 200). À ce stade, nous avons dessiné un cadran d’horloge statique.

Ci-dessous, je définis un constructeur pour dessiner le pointeur de l'horloge.

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); //起点的坐标
  var Y=200-this.R*0.8*Math.cos(i);

  var x=200-20*Math.sin(i); //终点的坐标
  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();
  }
 }

Il y a deux choses à dire ici : 1. Lorsque nous obtenons les millisecondes de l'heure actuelle et que nous les convertissons ensuite en heures, lorsque nous prenons modulo 24 pour calculer les heures de la journée, nous devons ajouter 8 ici 2. . Si Si vous souhaitez utiliser l'attribut lineCap, n'utilisez pas closePath() lors de la définition du chemin ci-dessus.

À ce stade, nous avons également besoin d'une méthode pour dessiner le pointeur et lui donner l'impression qu'il peut tourner :

function draw(){
  cntH.clearRect(0,0,needles.width,needles.height);
  var mzneedle=new clockNeedle(cntH,200,1,'rgba(0,0,0,.5)','round',2);
  //最后一个参数0代表画时针，1画分针，2画秒针
  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);

Une photo de l'horloge est jointe ci-dessous :

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.