sis_zhfx/src/components/other/clock/index.vue

<template>
  <div id="_C-ColckBox">
    <canvas id="_C-Colck" :width="clockWidth" :height="clockHeight"></canvas>
  </div>
</template>

<script>
export default {
  // 名称
  name: "clock",

  // 数据
  data() {
    return {
      L: 0, //基础半径
      timer: null,
      clockWidth: 0,
      clockHeight: 0,
    };
  },

  props: {
    width: {
      type: Number,
      default: 430,
    },
    height: {
      type: Number,
      default: 430,
    },
  },

  created() {
    this.clockWidth = this.width;
    this.clockHeight = this.height;
  },

  mounted() {
    this.drawCoolClock();
    this.timer = setInterval(() => {
      this.drawCoolClock();
    }, 30);
  },

  unmounted() {
    clearInterval(this.timer);
    this.timer = null;
  },

  // 函数
  methods: {
    drawCoolClock() {
      const fixNum = 20;
      let canvas = document.getElementById("_C-Colck");
      let ctx = canvas.getContext("2d");
      let [x0, y0] = [this.clockWidth / 2, this.clockHeight / 2]; //获取圆心x,y
      this.L = this.clockWidth / 2 - 10 - fixNum; //设置圆半径
      let [hourMaxL, hourMinL] = [this.L, this.L - 28]; //获取时刻度首位距离x0,y0位置
      let [minMaxL, minMinL] = [this.L - 2, this.L - 15];
      let centerL = 15;
      let oDate = new Date(); //绑定当前时间
      let oHours = oDate.getHours();
      let oMin = oDate.getMinutes();
      let oSen = oDate.getSeconds();
      let oHoursValue = -90 + oHours * 30 + oMin / 2; //获取小时的角度
      let oMinValue = -90 + oMin * 6;
      let oSenValue = -90 + oSen * 6;
      ctx.clearRect(0, 0, canvas.width, canvas.height); //清除画布
      //   this.drawHoursScale(ctx, x0, y0, 12, 9, hourMaxL, hourMinL); //绘制表盘的时钟刻度scale
      //   this.drawHoursScale(ctx, x0, y0, 60, 3, minMaxL, minMinL); //绘制表盘分钟刻度
      //   this.drawScaleNum(ctx, hourMinL - 25, x0, y0); //绘制12个表盘数字
      //   this.drawTimeNeedle(ctx, x0, y0, 15, 135, oHoursValue); //绘制时针
      //   this.drawTimeNeedle(ctx, x0, y0, 8, minMaxL - 15, oMinValue); //绘制分针
      //   this.drawTimeNeedle(ctx, x0, y0, 3, minMaxL - 2, oSenValue, "#f3a829"); //绘制秒针
      //   this.drawSenDotted(ctx, "#f3a829", x0, y0, oSenValue - 180, centerL); //绘制秒针尾部
      this.drawHoursScale(ctx, x0, y0, 12, 4, hourMaxL, hourMinL); //绘制表盘的时钟刻度scale
      this.drawHoursScale(ctx, x0, y0, 60, 2, minMaxL, minMinL); //绘制表盘分钟刻度
      this.drawScaleNum(ctx, hourMinL - 18, x0, y0); //绘制12个表盘数字
      this.drawTimeNeedle(
        ctx,
        x0,
        y0,
        5,
        (minMaxL - 15 - fixNum) / 1.5,
        oHoursValue
      ); //绘制时针
      this.drawTimeNeedle(ctx, x0, y0, 5, minMaxL - 15 - fixNum, oMinValue); //绘制分针
      this.drawTimeNeedle(ctx, x0, y0, 2, minMaxL - 2, oSenValue, "#f3a829"); //绘制秒针
      this.drawSenDotted(ctx, "#f3a829", x0, y0, oSenValue - 180, 12); //绘制秒针尾部
      this.drawCircleCenter(ctx, x0, y0, "#f3a829", 10); //绘制圆心
    },
    drawHoursScale(ctx, x0, y0, scaleNum, scaleW, maxL, minL) {
      for (let i = 0; i < scaleNum; i++) {
        let angel = -90 + i * (360 / scaleNum); //角度
        let [x1, y1] = [
          x0 + Math.cos((angel * Math.PI) / 180) * maxL,
          y0 + Math.sin((angel * Math.PI) / 180) * maxL,
        ];
        let [x2, y2] = [
          x0 + Math.cos((angel * Math.PI) / 180) * minL,
          y0 + Math.sin((angel * Math.PI) / 180) * minL,
        ];
        ctx.save();
        ctx.beginPath();
        ctx.lineWidth = scaleW;
        ctx.lineCap = "round";
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
      }
    },
    drawScaleNum(ctx, L, x0, y0) {
      for (let i = 0; i < 12; i++) {
        let angel = -90 + i * (360 / 12); //角度
        let [x, y] = [
          x0 + Math.cos((angel * Math.PI) / 180) * L,
          y0 + Math.sin((angel * Math.PI) / 180) * L,
        ];
        let num = i == 0 ? 12 : i;
        ctx.strokeStyle = "rgb(229,228,227)";
        ctx.save();
        ctx.beginPath();
        // ctx.font = "30px Arial";
        ctx.font = "27px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

        ctx.fillText(num, x, y);
        ctx.closePath();
        ctx.restore();
      }

      const baseDate = new Date();

      const weekDay = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];

      ctx.fillStyle = "rgb(229,228,227)";

      ctx.save();
      ctx.beginPath();
      ctx.font = "15px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.fillText(baseDate.formatDate("yyyy-MM-dd"), 285, 10);
      ctx.fillText(baseDate.formatDate("hh:mm:ss"), 293, 30);
      ctx.fillText(weekDay[baseDate.getDay()], 300, 50);
      ctx.closePath();
      ctx.restore();
    },
    drawTimeNeedle(ctx, x0, y0, lineW, L, angel, color = "rgb(229,228,227)") {
      let [x, y] = [
        x0 + Math.cos((angel * Math.PI) / 180) * L,
        y0 + Math.sin((angel * Math.PI) / 180) * L,
      ];
      ctx.save();
      ctx.beginPath();
      ctx.strokeStyle = color;
      ctx.lineWidth = lineW;
      ctx.lineCap = "round";
      ctx.moveTo(x0, y0);
      ctx.lineTo(x, y);
      ctx.stroke();
      ctx.closePath();
      ctx.restore();
    },
    drawCircleCenter(ctx, x0, y0, color, L) {
      ctx.save();
      ctx.beginPath();
      ctx.shadowBlur = 4;
      ctx.shadowColor = "#000";
      ctx.fillStyle = color;
      ctx.arc(x0, y0, L, 0, (360 * Math.PI) / 180);
      ctx.fill();
      ctx.closePath();
      ctx.restore();
    },
    drawSenDotted(ctx, color, x0, y0, angel, L) {
      let [x, y] = [
        x0 + Math.cos((angel * Math.PI) / 180) * L,
        y0 + Math.sin((angel * Math.PI) / 180) * L,
      ];
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = color;
      ctx.arc(x, y, 4, 0, (360 * Math.PI) / 180);
      ctx.fill();
      ctx.closePath();
      ctx.restore();
    },
  },

  watch: {},
};
</script>

<style lang="less" scoped>
#_C-ColckBox {
  height: 100%;
  //   background: radial-gradient(#f8f6f5, #f7f5f4, #e4e3e2, #b9b8b7);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>