canvas画一个时钟

/**

 * 分针速率根据秒针来，时针速率根据分针来

 *  */

function Clock (params, dom) {

  let R = 50,

  LINE_WIDTH = 3,

  X_CENTER = 200,

  Y_CENTER = 200,

  canvas = dom;

  this.setR = function (r) {

    this.R = r;

  }

  this.setXCenter = function (x) {

    this.X_CENTER = x;

  }

  this.setYCenter = function (y) {

    this.Y_CENTER = y;

  }

  this.getXCenter = function () {

    return this.X_CENTER;

  }

  this.getYCenter = function () {

    return this.Y_CENTER;

  }

  this.getR = function () {

    return this.R;

  }

  this.getDomElement = function() {

    return canvas;

  }

  // this.setCanvas = function (c) {

  //   return this.canvas = c

  // }

  this.setXCenter(params.x);

  this.setYCenter(params.y);

  this.setR(params.r);

}

Clock.prototype = {

  constructor: Clock,

  init: function () {

    var ctx = this.getDomElement().getContext('2d')

    // var s = 0;

    setInterval(() => {

      var x = this.getXCenter();

      var y = this.getYCenter();

      var r = this.getR();

      ctx.clearRect(x - r - 2, y - r - 2, 2 * r + 5, 2 * r + 5);

      var s = new Date().getSeconds();

      var m = new Date().getMinutes();

      var h = new Date().getHours();

      // if (s === 60) {

      //   s = 0;

      // }

      this.drawClock(ctx);

      this.drawCenter(ctx);

      this.drawSecond(ctx, s);

      this.drawMin(ctx, m, s);

      this.drawHour(ctx, h, m);

      // s += 1;

    },1000);

  },

  drawCenter: function (ctx) {

    var x = this.getXCenter();

    var y = this.getYCenter();

    var r = this.getR();

    ctx.beginPath();

    ctx.fillStyle = '#3f51b5';

    ctx.arc(x, y, 0.1 * r, 0, 2 * Math.PI);

    ctx.stroke();

    ctx.fill();

    ctx.beginPath();

    ctx.fillStyle = '#ffffff';

    ctx.arc(x, y, 0.05 * r, 0, 2 * Math.PI);

    ctx.stroke();

    ctx.fill();

  },

  drawClock: function (ctx) {

    var x = this.getXCenter();

    var y = this.getYCenter();

    var r = this.getR();

    ctx.beginPath();

    ctx.arc(x, y, r, 0, 2 * Math.PI);

    ctx.stroke();

    // 画刻度

    for (let i = 0; i < 60; i += 1) {

      ctx.beginPath();

      ctx.font = `15px Microsoft Yahei`;

      ctx.fillStyle = '#1d89d5';

       ctx.textAlign = 'center';

      if (0 <= i && i <=15) {

        if (i % 5 !== 0) {

          var xPointS = x + (r * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

          var yPointS = y - (r * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)));

          var xPointE = x + (r * 0.9 * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

          var yPointE = y - (r * 0.9 * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)))

          ctx.moveTo(xPointS, yPointS);

          ctx.lineTo(xPointE, yPointE);

        } else {

          // 长刻度

          var xPointS = x + (r * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

          var yPointS = y - (r * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)));

          var xPointE = x + (r * 0.8 * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

          var yPointE = y - (r * 0.8 * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)))

          ctx.moveTo(xPointS, yPointS);

          ctx.lineTo(xPointE, yPointE);

           if (i === 0) {

              // 写字

             ctx.fillText('12', xPointE, yPointE + 13);

           } else if (i === 5) {

             // 写字

            ctx.fillText('1', xPointE, yPointE + 13);

           } else if (i === 10) {

             // 写字

            ctx.fillText('2', xPointE - 5, yPointE + 5);

           } else if (i === 15) {

             // 写字

            ctx.fillText('3', xPointE - 5, yPointE + 5);

           }

        }

      } else if (15 < i && i <= 30) {

        if (i % 5 !== 0) {

          var xPointS = x + (r * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointS = y + (r * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

          var xPointE = x + (r * 0.9 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointE = y + (r * 0.9 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))))

          ctx.moveTo(xPointS, yPointS);

          ctx.lineTo(xPointE, yPointE);

        } else {

          // 长刻度

          var xPointS = x + (r * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointS = y + (r * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

          var xPointE = x + (r * 0.8 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointE = y + (r * 0.8 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

          ctx.moveTo(xPointS, yPointS);

          ctx.lineTo(xPointE, yPointE);

          if (i === 20) {

            // 写字

            ctx.fillText('4', xPointE - 5, yPointE);

         } else if (i === 25) {

           // 写字

          ctx.fillText('5', xPointE - 5, yPointE);

         } else if (i === 30) {

          // 写字

          ctx.fillText('6', xPointE, yPointE - 5);

         }

        }

      } else if (30 < i && i < 45) {

        if (i % 5 !== 0) {

          var xPointS = x - (r * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointS = y + (r * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var xPointE = x - (r * 0.9 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointE = y + (r * 0.9 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))))

          ctx.moveTo(xPointS, yPointS);

          ctx.lineTo(xPointE, yPointE);

        } else {

          // 长刻度

          var xPointS = x - (r * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointS = y + (r * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var xPointE = x - (r * 0.8 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointE = y + (r * 0.8 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          ctx.moveTo(xPointS, yPointS);

          ctx.lineTo(xPointE, yPointE);

          if (i === 35) {

            // 写字

           ctx.fillText('7', xPointE + 5, yPointE);

         } else if (i === 40) {

           // 写字

          ctx.fillText('8', xPointE + 5, yPointE + 5);

         }

        }

      } else if (45 <= i && i < 60){

        if (i % 5 !== 0) {

          var xPointS = x - (r * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointS = y - (r * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var xPointE = x - (r * 0.9 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointE = y - (r * 0.9 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))))

          ctx.moveTo(xPointS, yPointS);

          ctx.lineTo(xPointE, yPointE);

        } else {

          // 长刻度

          var xPointS = x - (r * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointS = y - (r * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var xPointE = x - (r * 0.8 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          var yPointE = y - (r * 0.8 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

          ctx.moveTo(xPointS, yPointS);

          ctx.lineTo(xPointE, yPointE);

          if (i === 45) {

            // 写字

            ctx.fillText('9', xPointE + 5, yPointE + 3);

         } else if (i === 50) {

            // 写字

            ctx.fillText('10', xPointE + 8, yPointE + 5);

         } else if (i === 55) {

            // 写字

            ctx.fillText('11', xPointE + 3, yPointE + 13);

        }

        }

      }

      ctx.stroke();

    }

  },

  drawSecond: function (ctx, s) {

    var x = this.getXCenter();

    var y = this.getYCenter();

    var r = this.getR();

    ctx.beginPath();

    ctx.moveTo(x,y);

    var i = s

    if (0 <= i && i <=15) {

      // 第一现象线

      var xPointE = x + (r * 0.9 * Math.cos((Math.PI / 2) - (Math.PI / 30 * i)));

      var yPointE = y - (r * 0.9 * Math.sin((Math.PI / 2) - (Math.PI / 30 * i)))

      ctx.lineTo(xPointE, yPointE);

    } else if (15 < i && i <= 30) {

      // 第四象限

      var xPointE = x + (r * 0.9 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))));

      var yPointE = y + (r * 0.9 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * i))))

      ctx.lineTo(xPointE, yPointE);

    } else if (30 < i && i < 45) {

      // 第三象限

      var xPointE = x - (r * 0.9 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

      var yPointE = y + (r * 0.9 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))))

      ctx.lineTo(xPointE, yPointE);

    } else if (45 <= i && i < 60){

      // 第二象限

      var xPointE = x - (r * 0.9 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))));

      var yPointE = y - (r * 0.9 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * i))))

      ctx.lineTo(xPointE, yPointE);

    }

    ctx.stroke();

  },

  drawMin: function (ctx, m, s) {

    var x = this.getXCenter();

    var y = this.getYCenter();

    var r = this.getR();

    ctx.beginPath();

    ctx.moveTo(x,y);

    var i = m

    if (0 <= i && i <=15) {

      // 第一象限

      var xPointE = x + (r * 0.8 * Math.cos((Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i)));

      var yPointE = y - (r * 0.8 * Math.sin((Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i)));

      ctx.lineTo(xPointE, yPointE);

    } else if (15 < i && i <= 30) {

      // 第四象限

      var xPointE = x + (r * 0.8 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 30 * s / 60) -(Math.PI / 30 * i))));

      var yPointE = y + (r * 0.8 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

      ctx.lineTo(xPointE, yPointE);

    } else if (30 < i && i < 45) {

      // 第三象限

      var xPointE = x - (r * 0.8 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

      var yPointE = y + (r * 0.8 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

      ctx.lineTo(xPointE, yPointE);

    } else if (45 <= i && i < 60){

      // 第二象限

      var xPointE = x - (r * 0.8 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

      var yPointE = y - (r * 0.8 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 30 * s / 60) - (Math.PI / 30 * i))));

      ctx.lineTo(xPointE, yPointE);

    }

    ctx.stroke();

  },

  drawHour: function (ctx, h, m) {

    var x = this.getXCenter();

    var y = this.getYCenter();

    var r = this.getR();

    ctx.beginPath();

    ctx.moveTo(x,y);

    var i = h

    if ((0 <= i && i <= 3) || (12 <= i && i <= 15)) {

      i = i >= 12 ? i - 12 : i;

      // 第一现象线

      var xPointE = x + (r * 0.65 * Math.cos((Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60)));

      var yPointE = y - (r * 0.65 * Math.sin((Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60)));

      ctx.lineTo(xPointE, yPointE);

    } else if ((15 < i && i <= 18) || (3 < i && i <= 6)) {

      i = i >= 12 ? i - 12 : i;

      // 第四象限

      var xPointE = x + (r * 0.65 * Math.cos(Math.abs((Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

      var yPointE = y + (r * 0.65 * Math.sin(Math.abs((Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

      ctx.lineTo(xPointE, yPointE);

    } else if ((18 < i && i < 21) || (6 < i && i < 9)) {

      i = i >= 12 ? i - 12 : i;

      // 第三象限

      var xPointE = x - (r * 0.65 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

      var yPointE = y + (r * 0.65 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

      ctx.lineTo(xPointE, yPointE);

    } else if ((21 <= i && i <= 23) || (9 <= i && i <= 11)){

      i = i >= 12 ? i - 12 : i;

      // 第二象限

      var xPointE = x - (r * 0.65 * Math.cos(Math.abs((3 * Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

      var yPointE = y - (r * 0.65 * Math.sin(Math.abs((3 * Math.PI / 2) - (Math.PI / 6 * i) - (Math.PI / 6 * m / 60))));

      ctx.lineTo(xPointE, yPointE);

    }

    ctx.stroke();

  },

}

var canvas = document.getElementById('x');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

var c = new Clock({ x: 400, y: 400, r: 200 },canvas);

c.init();