Javascript kombiniert mit Canvas, um eine einfache kreisförmige Clock_Javascript-Fähigkeit zu implementieren

Ich habe bereits etwas über das Canvas-Element in HTML5 gelernt und zum Üben eine einfache Uhr implementiert. Die Uhr selbst ist nicht kompliziert und es werden keine Bilder verwendet, um sie zu verschönern. Obwohl der Spatz klein ist und alle inneren Organe hat, werde ich ihn unten mit Ihnen teilen:

Demo-Effekt:

HTML-Code:

Code kopieren Der Code lautet wie folgt:

JS-Code:

Code kopieren Der Code lautet wie folgt:

var Canvas = {};
Canvas.cxt = document.getElementById('canvasId').getContext('2d');
Canvas.Point = function(x, y){
This.x = x;
This.y = y;
};
/*Alle Grafiken auf Leinwand löschen*/
Canvas.clearCxt = ​​​​function(){
var me = this;
var canvas = me.cxt.canvas;
​ ​ me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
};
/*Uhr*/
Canvas.Clock = function(){
var me = Leinwand,
          c = me.cxt,
​​​​Radius = 150, /*radius*/
Skala = 20, /*Skalenlänge*/
         Minangle = (1/30)*Math.PI, /*Bogenmaß in einer Minute*/
Stundenwinkel = (1/6)*Math.PI, /*Der Bogen einer Stunde*/
HourHandLength = Radius/2, /*Stundenzeigerlänge*/
        minHandLength = radius/3*2, /*Minutenzeigerlänge*/
        secHandLength = radius/10*9, /*Sekundenzeigerlänge*/
center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*center of Circle*/
/*Zeichne den Mittelpunkt des Kreises (Mitte des Zifferblatts)*/
Funktion drawCenter(){
          c.save();
           c.translate(center.x, center.y);            c.fillStyle = 'black';
           c.beginPath();
          c.arc(0, 0, radius/20, 0, 2*Math.PI);
           c.closePath();
          c.fill();
          c.stroke();
           c.restore();
};
/*Zeichne das Zifferblatt durch Koordinatentransformation*/
Funktion drawBackGround(){
          c.save();
           c.translate(center.x, center.y); /*Translation transformation*/
          /*Maßstab zeichnen*/
         Funktion drawScale(){
                c.moveTo(radius - scale, 0);
                 c.lineTo(radius, 0);         };
           c.beginPath();
          c.arc(0, 0, radius, 0, 2*Math.PI, true);
           c.closePath();
für (var i = 1; i <= 12; i ) {
            drawScale();
              c.rotate(hourangle); /*Rotationstransformation*/
        };
/*Zeichnungszeit (3,6,9,12)*/
c.font = "bold 30px impack"
c.fillText("3", 110, 10);
          c.fillText("6", -7, 120);
          c.fillText("9", -120, 10);
          c.fillText("12", -16, -100);
          c.stroke();
           c.restore();
};
/*Stundenzeiger zeichnen (h: aktuelle Zeit (24-Stunden-Uhr))*/
This.drawHourHand = function(h){
h = h === 0? 24: h;
          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.stroke();
           c.restore();
};
/*Minutenzeiger zeichnen (m: aktuelle Minute)*/
This.drawMinHand = function(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.stroke();
           c.restore();
};
/*Sekundenzeiger zeichnen (s: aktuelle Sekunde)*/
This.drawSecHand = Funktion(en){
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.stroke();
           c.restore();
};
/*Zeichne eine Uhr basierend auf der Ortszeit*/
This.drawClock = function(){
        var me = this;
         Funktion 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());
}
       draw();
setInterval(draw, 1000);
};
};
var main = function(){
var clock = new Canvas.Clock();
clock.drawClock();
};

Der Code beinhaltet einige einfache Canvas-Element-APIs, bitte probieren Sie es aus

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die Leinwand lernen.