使用canvas简单绘制时钟

html部分：

    <canvas id="canvas" width="800" height="600"></canvas>

js部分：

class Clock {
        constructor(){
          this.canvas = document.getElementById('canvas');
          this.ctx = this.canvas.getContext('2d');
          
        }
        init(){
          this.date = new Date();
          this.hour = this.date.getHours() > 12 ? this.date.getHours() - 12 : this.date.getHours();
          this.min = this.date.getMinutes();
          this.sec = this.date.getSeconds();
          this.renderClockFace();  
          return setTimeout(() => {
            return this.init();
          }, 1000);
          
        }

        renderClockFace(){
          this.ctx.clearRect(0,0,800,600)
          this.ctx.save();
          this.ctx.translate(400,300);
          this.ctx.beginPath();
          this.ctx.strokeStyle = 'grey';
          this.ctx.lineWidth = 10;
          this.ctx.arc(0,0,200,0,2*Math.PI);
          this.ctx.stroke();
          this.ctx.closePath();
          this.ctx.save();
          return this.renderMinutePoint();
        }

        renderMinutePoint(){
          for(let i = 0; i < 60; i++){
            this.ctx.beginPath();
            this.ctx.rotate(2 * Math.PI / 60);
            this.ctx.moveTo(180,0);
            this.ctx.lineWidth = 2;
            this.ctx.strokeStyle = 'black';
            this.ctx.lineTo(190,0);
            this.ctx.stroke();
            this.ctx.closePath();
          }
          this.ctx.restore();
          this.ctx.save();
          return this.renderHourPoint();
        }

        renderHourPoint(){
          for(let i = 0; i < 12; i++){
            this.ctx.beginPath();
            this.ctx.rotate(2 * Math.PI / 12);
            this.ctx.moveTo(180,0);
            this.ctx.lineWidth = 10;
            this.ctx.lineTo(200,0);
            this.ctx.stroke();
            this.ctx.closePath();
          }
          this.ctx.restore();
          this.ctx.save();
          return this.renderSecondHand()
        }

        renderSecondHand(){
          this.ctx.rotate(- 2 * Math.PI / 4);
          this.ctx.save();
          this.ctx.beginPath();
          this.ctx.rotate(2 * Math.PI / 60 * this.sec);
          this.ctx.lineWidth = 2;
          this.ctx.strokeStyle = 'black';
          this.ctx.moveTo(-30,0);
          this.ctx.lineTo(170,0);
          this.ctx.stroke();
          this.ctx.closePath();
          this.ctx.restore();
          this.ctx.save();
          return this.renderMinuteHand();
        }

        renderMinuteHand(){
          this.ctx.beginPath();
          this.ctx.rotate(2 * Math.PI / 60 * this.min + 2 * Math.PI / 3600 * this.sec)
          this.ctx.moveTo(-20,0);
          this.ctx.lineTo(160,0);
          this.ctx.lineWidth = 4;
          this.ctx.strokeStyle = 'black';
          this.ctx.stroke();
          this.ctx.closePath();
          this.ctx.restore();
          this.ctx.save();
          return this.renderHourHand();
        }

        renderHourHand(){
          this.ctx.beginPath();
          this.ctx.rotate(2 * Math.PI / 12 * this.hour + 2 * Math.PI / 60 / 12 * this.min + 2 * Math.PI / 3600 / 12 * this.sec)
          this.ctx.moveTo(-10,0);
          this.ctx.lineTo(140,0);
          this.ctx.lineWidth = 10;
          this.ctx.strokeStyle = 'black'
          this.ctx.stroke();
          this.ctx.closePath();
          this.ctx.restore();
          this.ctx.save();
          return this.renderClockNumber();  
        }

        renderClockNumber(){
          this.ctx.restore();
          this.ctx.restore();
          let arr = [3,4,5,6,7,8,9,10,11,12,1,2,3]
          for(let i = 0; i < 12; i++){
            let rad = 2 * Math.PI / 12 * i;
            let x = Math.cos(rad) * 160
            let y = Math.sin(rad) * 160
            this.ctx.beginPath();
            this.ctx.moveTo(180,0);
            this.ctx.font = "20px Verdana"
            x = arr[i] >= 11 ? x - 7 : x;
            this.ctx.fillText(arr[i],x-5,y+8);
            this.ctx.closePath();
          }
          return this.renderClockCenter();
        }

        renderClockCenter(){
          this.ctx.beginPath();
          this.ctx.arc(0,0,10,0,2*Math.PI)
          this.ctx.fillStyle = 'pink'
          this.ctx.fill();
          this.ctx.closePath();
          this.ctx.restore();
        }
      }

      new Clock().init();