Das WeChat-Applet verwendet Canvas zum Zeichnen von Uhren

<canvas canvas-id="meineCanvas" class="meineCanvas"></canvas>

/**index.wxss**/
.meineLeinwand {
  Breite: 100 %;
  Höhe: 100%;
  Position: fest;
}

Seite({
  width: 0, //Fensterbreite height: 0, //Fensterhöhe onLoad: function () {
    // Systeminformationen abrufen wx.getSystemInfo({
      //Systeminformationen erfolgreich abrufen, ermittelte Breite und Höhe des Systemfensters speichern Erfolg: res => {
        // konsole.log(res)
        diese.Breite = res.Fensterbreite
        diese.Höhe = res.Fensterhöhe
        }
      })
    },
  Timer: null, //Timer onReady: function(){
    //CTX-Instanz erstellen var ctx = wx.createCanvasContext('myCanvas')
    // Den Winkel zur späteren Verwendung in Radiant umwandeln // Berechnungsformel: Radiant = Winkel*Math.PI / 180
    Konstante D6 = 6 * Math.PI / 180
     Konstante D30 = 30 * Math.PI / 180
     const D90 = 90 * Math.PI / 180
     // Breiten- und Höhenwerte abrufen var width = this.width, height = this.height
     // Berechnen Sie den Zifferblattradius und lassen Sie 30px Rand var Radius = Breite / 2 -30
     // Einmal pro Sekunde zeichnen draw()
     this.timer = setzeInterval(zeichnen, 1000)
     //Zeichenfunktion function draw(){
       //Setze den Achsenursprung auf die Mitte des Fensters ctx.translate(Breite / 2, Höhe / 2)
       //Zeichne das Zifferblatt drawClock(ctx,radius)
       //Zeiger zeichnen drawHand(ctx, radius)
       //Zeichnung ausführen ctx.draw()
   }
  
    //Zeichnen Sie das Zifferblatt function drawClock(ctx, radius){
      // Zeichne einen großen Kreis // Der Radius des großen Kreises ist radius und die Linienstärke beträgt 2px
      ctx.setLineWidth(2) //Linienstärke festlegen ctx.beginPath() //Einen neuen Pfad beginnen ctx.arc(0, 0, radius, 0, 2 * Math.PI, true)
      ctx.stroke() //Linien zeichnen //Konzentrische Kreise zeichnen //Der Radius des Mittelkreises beträgt 8px und die Linienstärke 1px
      ctx.setLineWidth(1) //Linienstärke festlegen ctx.beginPath() //Neuen Pfad beginnen ctx.arc(0, 0, 8, 0, 2 * Math.PI, true)
      ctx.stroke() //Zeichne eine Linie // Zeichne ein großes Zifferblatt mit einer Linienstärke von 5px
      ctx.setLineWidth(5)
      für (var i = 0; i < 12; ++i){
        // Im Uhrzeigersinn mit dem Ursprung als Mittelpunkt (bei mehreren Aufrufen werden die Drehwinkel überlagert)
        // Das große Zifferblatt muss 12 Linien zeichnen, die 12 Stunden darstellen, und sich jedes Mal um 30 Grad drehen ctx.rotate(D30) // 360 / 12 = 30
        ctx.beginPath()
        ctx.moveTo(Radius, 0)
        ctx.moveTo(radius - 15, 0) //Großer Maßstab, Länge 15px
        ctx.stroke()
      }
      // Zeichne ein kleines Zifferblatt mit einer Linienstärke von 1px
      ctx.setLineWidth(1)
      für(var i = 0; i < 60; ++i){
        // Das kleine Zifferblatt muss 60 Linien zeichnen, die 60 Minuten oder 60 Sekunden darstellen, und sich jedes Mal um 6 Grad drehen ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(Radius, 0)
        ctx.lineTo(radius - 10, 0) //Kleines Zifferblatt, Länge 10px
        ctx.stroke()
      }
      //Text zeichnen ctx.setFontSize(20) //Schriftgröße ctx.textBaseline = 'middle' // Text vertikal zentrieren // Radius r des Textes vom Mittelpunkt des Zifferblatts aus berechnen
      var r = Radius - 30
      für(var i = 1; i <= 12; ++i){
        //Textkoordinaten mit trigonometrischen Funktionen berechnen var x = r * Math.cos(D30 * i - D90)
        var y = r * Math.sin(D30 * i - D90)
        if(i > 10){ // Passe die Positionen von 11 und 12 an // Zeichne Text auf die Leinwand fillText(text, obere linke Ecke x-Koordinate, obere linke Ecke y-Koordinate)
          ctx.fillText(i, x - 12, y)
        } anders {
          ctx.fillText(i, x-6, y)
        }
      }
    }
    //Zeiger zeichnen Funktion drawHand(ctx, radius){
      var t = new Date() // Aktuelle Uhrzeit abrufen var h = t.getHours() //Stunden var m = t.getMinutes() //Minuten var s = t.getSeconds() //Sekunden h = h > 12 ? h -12 :h //24-Stunden-System in 12-Stunden-System umwandeln //Die Uhrzeit beginnt bei 3 Uhr und dreht sich um 90 Grad gegen den Uhrzeigersinn, um auf 12 Uhr zu zeigen ctx.rotate(-D90)
      //Stundenzeiger zeichnen ctx.save() //Rotationsstatus aufzeichnen // Skala berechnen, auf die der Stundenzeiger zeigt // Mit 30 Grad * h lässt sich der Rotationswinkel jeder Stunde berechnen // Wenn die Zeit keine Stunde ist, müssen Sie h + m / 60 + s / 3600 verwenden, um den genauen Versatz zu berechnen ctx.rotate(D30 * (h + m / 60 + s / 3600))
      ctx.setLineWidth(6)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 2,6, 0)
      ctx.stroke()
      ctx.wiederherstellen()
      // Zeichne den Minutenzeiger ctx.save()
      ctx.rotate(D6 * (m + s / 60))
      ctx.setLineWidth(4)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 1,8, 0)
      ctx.stroke()
      ctx.wiederherstellen()
      //Zeichne den Sekundenzeiger ctx.save()
      ctx.drehen(D6 * s)
      ctx.setLineWidth(2)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(radius / 1,6, 0)
      ctx.stroke()
      ctx.wiederherstellen() 
    } 
  }
})