Javascript combiné avec Canvas pour implémenter une simple horloge circulaire_javascript skills

J'ai déjà découvert l'élément canvas en HTML5 et j'ai implémenté une horloge simple pour m'entraîner. L'horloge en elle-même n'est pas compliquée et aucune image n'est utilisée pour l'embellir. Cependant, bien que le moineau soit petit et possède tous les organes internes, je la partagerai avec vous ci-dessous :

Effet démo :

code html :

Copier le code Le code est le suivant :

Code JS :

Copier le code Le code est le suivant :

var Toile = {};
Canvas.cxt = document.getElementById('canvasId').getContext('2d');
Canvas.Point = fonction (x, y){
Ceci.x = x;
Ceci.y = y;
};
/*Effacer tous les graphiques sur la toile*/
Canvas.clearCxt = ​​​​fonction(){
var moi = ceci;
var toile = me.cxt.canvas;
​ ​ me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
};
/*horloge*/
Canvas.Clock = fonction(){
var moi = Toile,
          c = me.cxt,
​​​​rayon = 150, /*rayon*/
échelle = 20, /*Longueur de l'échelle*/
         minangle = (1/30)*Math.PI, /*radians en une minute*/
angle horaire = (1/6)*Math.PI, /*L'arc d'une heure*/
hourHandLength = rayon/2, /*longueur de l'aiguille des heures*/
        minHandLength = rayon/3*2, /*Longueur de l'aiguille des minutes*/
        secHandLength = rayon/10*9, /*Longueur de la trotteuse*/
center = new me.Point(c.canvas.width/2, c.canvas.height/2 /*centre du cercle*/
); /*Dessinez le centre du cercle (centre du cadran)*/
fonction drawCenter(){
          c.save();
           c.translate(center.x, center.y
);            c.fillStyle = 'noir';
           c.beginPath();
          c.arc(0, 0, rayon/20, 0, 2*Math.PI);
           c.closePath();
          c.fill();
          c.AVC();
           c.restore();
};
/*Dessinez le cadran par transformation de coordonnées*/
Fonction drawBackGround(){
          c.save();
           c.translate(center.x, center.y); /*Transformation de traduction*/
;           /*Dessiner l'échelle*/
         fonction drawScale(){
                c.moveTo(rayon - échelle, 0);
                 c.lineTo(rayon, 0);         };
           c.beginPath();
          c.arc(0, 0, radius, 0, 2*Math.PI, true);
           c.closePath();
pour (var je = 1; je <= 12; je ) {
            drawScale();
              c.rotate(hourangle); /*Transformation de rotation*/
        };
/*Temps de dessin (3,6,9,12)*/
c.font = " impack gras 30px"
c.fillText("3", 110, 10);
          c.fillText("6", -7, 120);
          c.fillText("9", -120, 10);
          c.fillText("12", -16, -100);
          c.AVC();
           c.restore();
};
/*Dessiner l'aiguille des heures (h : heure actuelle (horloge 24 heures))*/
This.drawHourHand = fonction(h){
h = h === 0?           c.save();
           c.translate(center.x, center.y
);           c.rotate(3/2*Math.PI);
          c.rotate(h*hourangle);
           c.beginPath();
           c.moveTo(0, 0);
           c.lineTo(hourHandLength, 0);
          c.AVC();
           c.restore();
};
/*Dessiner l'aiguille des minutes (m : minute actuelle)*/
This.drawMinHand = fonction(m){
           m = m === 0 60 : m;
          c.save();
           c.translate(center.x, center.y
);           c.rotate(3/2*Math.PI);
          c.rotate(m*minangle);
           c.beginPath();
           c.moveTo(0, 0);
           c.lineTo(minHandLength, 0);
          c.AVC();
           c.restore();
};
/*Dessiner la trotteuse (s : seconde actuelle)*/
This.drawSecHand = fonction(s){
s = s === 0? 60 : s;
          c.save();
           c.translate(center.x, center.y
);           c.rotate(3/2*Math.PI);
          c.rotate(s*minangle);
           c.beginPath();
           c.moveTo(0, 0);
           c.lineTo(secHandLength, 0);
          c.AVC();
           c.restore();
};
/*Dessinez une horloge en fonction de l'heure locale*/
This.drawClock = function(){
        var moi = ceci ;
         fonction draw(){
          var date = new Date();
​​​​​ Canvas.clearCxt();
             drawBackGround();
           drawCenter();
              me.drawHourHand(date.getHours() date.getMinutes()/60);
               me.drawMinHand(date.getMinutes() date.getSeconds()/60);
              me.drawSecHand(date.getSeconds());
>
       dessiner();
setInterval(dessiner, 1000);
};
};
var main = fonction(){
var horloge = new Canvas.Clock();
horloge.drawClock();
};

Le code implique quelques API simples d'éléments de canevas, veuillez l'essayer

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tous ceux qui apprennent le canevas.