WeChatアプレットはキャンバスを使用して時計を描画します

<キャンバス キャンバス ID ="myCanvas" クラス="mycanvas"></キャンバス>

/**index.wxss**/
.mycanvas {
  幅: 100%;
  高さ: 100%;
  位置: 固定;
}

ページ（{
  width: 0, //ウィンドウの幅 height: 0, //ウィンドウの高さ onLoad: function () {
    // システム情報を取得する wx.getSystemInfo({
      // システム情報を正常に取得し、取得したシステムウィンドウの幅と高さを保存します。成功: res => {
        // コンソール.log(res)
        this.width = res.windowWidth
        this.height = res.windowHeight
        }
      })
    },
  タイマー: null、//タイマー onReady: function(){
    //ctxインスタンスを作成する var ctx = wx.createCanvasContext('myCanvas')
    //後で使用するために角度をラジアンに変換します //計算式: ラジアン = 角度*Math.PI / 180
    定数D6 = 6 * Math.PI / 180
     定数D30 = 30 * Math.PI / 180
     定数 D90 = 90 * Math.PI / 180
     // 幅と高さの値を取得します var width = this.width, height = this.height
     // ダイヤルの半径を計算し、30px の余白を残す var radius = width / 2 -30
     // 1 秒ごとに 1 回描画する draw()
     this.timer = setInterval(描画、1000)
     //描画関数 function draw(){
       // 軸の原点をウィンドウの中心に設定します ctx.translate(width / 2, height / 2)
       // ダイヤルを描画する drawClock(ctx,radius)
       // ポインタを描画する drawHand(ctx, radius)
       //描画を実行する ctx.draw()
   }
  
    // ダイヤルを描画する function drawClock(ctx, radius){
      // 大きな円を描く // 大きな円の半径は radius で、線の太さは 2px です
      ctx.setLineWidth(2) //線の太さを設定 ctx.beginPath() //新しいパスを開始 ctx.arc(0, 0, radius, 0, 2 * Math.PI, true)
      ctx.stroke() //線を描く //同心円を描く //中心の円の半径は8px、線の太さは1px
      ctx.setLineWidth(1) //線の太さを設定 ctx.beginPath() //新しいパスを開始 ctx.arc(0, 0, 8, 0, 2 * Math.PI, true)
      ctx.stroke() //線を描く // 線の太さ5pxの大きなダイヤルを描く
      ctx.setLineWidth(5)
      (var i = 0; i < 12; ++i){
        // 原点を中心に時計回りに回転します（複数回呼び出すと回転角度が重ね合わされます）
        // 大きな文字盤は 12 時間を表す 12 本の線を描き、そのたびに 30 度回転します ctx.rotate(D30) // 360 / 12 = 30
        ctx.beginPath()
        ctx.moveTo(半径, 0)
        ctx.moveTo(radius - 15, 0) // 大きいスケールの長さ 15px
        ctx.ストローク()
      }
      // 線の太さが 1px の小さなダイヤルを描画します
      ctx.setLineWidth(1)
      (var i = 0; i < 60; ++i){
        // 小さなダイヤルは 60 分または 60 秒を表す 60 本の線を描画する必要があり、そのたびに 6 度回転します ctx.rotate(D6)
        ctx.beginPath()
        ctx.moveTo(半径, 0)
        ctx.lineTo(radius - 10, 0) // 小さいダイヤルの長さ 10px
        ctx.ストローク()
      }
      //テキストを描画 ctx.setFontSize(20) //フォントサイズ ctx.textBaseline = 'middle' //テキストを垂直中央に配置する //ダイヤルの中心からテキストの半径rを計算する
      var r = 半径 - 30
      (変数 i = 1; i <= 12; ++i){
        // 三角関数を使用してテキスト座標を計算します var x = r * Math.cos(D30 * i - D90)
        var y = r * Math.sin(D30 * i - D90)
        if(i > 10){ // 11と12の位置を調整する // キャンバスにテキストを描画する fillText(text, 左上隅のx座標, 左上隅のy座標)
          ctx.fillText(i, x - 12, y)
        } それ以外 {
          ctx.fillText(i, x-6, y)
        }
      }
    }
    //ポインタを描画する function drawHand(ctx, radius){
      var t = new Date() // 現在の時刻を取得します var h = t.getHours() // 時間 var m = t.getMinutes() // 分 var s = t.getSeconds() // 秒 h = h > 12 ? h -12 :h // 24 時間制を 12 時間制に変換します // 時刻は 3 時から始まり、反時計回りに 90 度回転して 12 時を指します ctx.rotate(-D90)
      // 時針を描画します ctx.save() // 回転状態を記録します // 時針が指すスケールを計算します // 30 度 * h を使用して、各時間の回転角度を計算できます // 時間が 1 時間でない場合は、h + m / 60 + s / 3600 を使用して正確なオフセットを計算する必要があります ctx.rotate(D30 * (h + m / 60 + s / 3600))
      ctx.setLineWidth(6)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(半径 / 2.6, 0)
      ctx.ストローク()
      ctx.復元()
      // 分針を描画する ctx.save()
      ctx.rotate(D6 * (m + s / 60))
      ctx.setLineWidth(4)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(半径 / 1.8, 0)
      ctx.ストローク()
      ctx.復元()
      //秒針を描く ctx.save()
      ctx.rotate(D6 * s)
      ctx.setLineWidth(2)
      ctx.beginPath()
      ctx.moveTo(-20, 0)
      ctx.lineTo(半径 / 1.6, 0)
      ctx.ストローク()
      ctx.復元() 
    } 
  }
})