canvas绘制数码管（vue版）

---

项目中UI用了数码管来显示数字，网上也没有案例，我就做了一个，喜欢的点赞分享呀

<template>
  <canvas ref="LED">
    {{'浏览器\r不支持'}}
  </canvas>
</template>

<script>
export default {
  name: "LED",
  props: {
    // 通过数码管宽度计算高度
    width: {
      type: Number,
      default: 30
    },
    // 线条粗细
    lineWidth: {
      type: Number,
      default: 5
    },
    value: {
      type: String,
      default: '8'
    },
    // 数码管之间的间隔
    interval: {
      type: Number,
      default: 1
    },
    color: {
      type: String,
      default: 'green'
    }
  },
  computed: {
    space () {
      return Math.SQRT2 * this.interval;
    },
    // 线条的宽度和高度
    h () {
      return this.width - 2 * this.space;
    },
    w () {
      return this.lineWidth;
    },
    // 数码管的宽度，高度
    height () {
      return 3 * this.space + 2 * this.h;
    }
  },
  mounted () {
    this.drawLED();
  },
  methods: {
    drawLED () {
      if (!this.value) {
        return;
      }
      const canvas = this.$refs['LED'];
      canvas.width = this.width;
      canvas.height = this.height;
      const canvasRenderContext2D = canvas.getContext('2d');
      const invokeNumber = {
        0: [this.leftTop,this.top,this.rightTop,this.leftBottom,this.bottom,this.rightBottom],
        1: [this.rightTop,this.rightBottom],
        2: [this.top,this.rightTop,this.center,this.leftBottom,this.bottom,],
        3: [this.top,this.rightTop,this.center,this.bottom,this.rightBottom],
        4: [this.leftTop,this.rightTop,this.center,this.rightBottom],
        5: [this.leftTop,this.top,this.center,this.bottom,this.rightBottom],
        6: [this.leftTop,this.top,this.center,this.leftBottom,this.bottom,this.rightBottom],
        7: [this.top,this.rightTop,this.rightBottom],
        8: [this.leftTop,this.top,this.rightTop,this.center,this.leftBottom,this.bottom,this.rightBottom],
        9: [this.leftTop,this.top,this.rightTop,this.center,this.bottom,this.rightBottom]
      };
      for (const func of invokeNumber[this.value]) {
        func.call(this, canvasRenderContext2D);
      }
    },
    rightBottom (canvasRenderContext2D) {
      canvasRenderContext2D.beginPath();
      canvasRenderContext2D.moveTo(this.width, 2 * this.space + this.h);
      canvasRenderContext2D.lineTo(this.width, 2 * this.space + 2 * this.h);
      canvasRenderContext2D.lineTo(this.width - this.w, 2 * this.space + 2 * this.h - this.w);
      canvasRenderContext2D.lineTo(this.width - this.w, 2 * this.space + this.h + this.w);
      canvasRenderContext2D.closePath();
      canvasRenderContext2D.fillStyle = this.color;
      canvasRenderContext2D.fill();
    },
    bottom (canvasRenderContext2D) {
      canvasRenderContext2D.beginPath();
      canvasRenderContext2D.moveTo(this.space, 3 * this.space + 2 * this.h);
      canvasRenderContext2D.lineTo(this.space + this.w, 3 * this.space + 2 * this.h - this.w);
      canvasRenderContext2D.lineTo(this.space + this.h - this.w, 3 * this.space + 2 * this.h - this.w);
      canvasRenderContext2D.lineTo(this.space + this.h, 3 * this.space + 2 * this.h);
      canvasRenderContext2D.closePath();
      canvasRenderContext2D.fillStyle = this.color;
      canvasRenderContext2D.fill();
    },
    leftBottom (canvasRenderContext2D) {
      canvasRenderContext2D.beginPath();
      canvasRenderContext2D.moveTo(0, 2 * this.space + this.h);
      canvasRenderContext2D.lineTo(this.w, 2 * this.space + this.h + this.w);
      canvasRenderContext2D.lineTo(this.w, 2 * this.space + 2 * this.h - this.w);
      canvasRenderContext2D.lineTo(0, 2 * this.space + 2 * this.h);
      canvasRenderContext2D.closePath();
      canvasRenderContext2D.fillStyle = this.color;
      canvasRenderContext2D.fill();
    },
    center (canvasRenderContext2D) {
      canvasRenderContext2D.beginPath();
      canvasRenderContext2D.moveTo(this.space, 2 * this.space + this.h);
      canvasRenderContext2D.lineTo(this.space + this.w, 2 * this.space + this.h - this.w);
      canvasRenderContext2D.lineTo(this.space + this.h - this.w, 2 * this.space + this.h - this.w);
      canvasRenderContext2D.lineTo(this.space + this.h, 2 * this.space + this.h);
      canvasRenderContext2D.closePath();
      canvasRenderContext2D.fillStyle = this.color;
      canvasRenderContext2D.fill();
    },
    rightTop (canvasRenderContext2D) {
      canvasRenderContext2D.beginPath();
      canvasRenderContext2D.moveTo(this.width, this.space);
      canvasRenderContext2D.lineTo(this.width, this.space + this.h);
      canvasRenderContext2D.lineTo(this.width - this.w, this.space + this.h - this.w);
      canvasRenderContext2D.lineTo(this.width - this.w, this.w + this.space);
      canvasRenderContext2D.closePath();
      canvasRenderContext2D.fillStyle = this.color;
      canvasRenderContext2D.fill();
    },
    top (canvasRenderContext2D) {
      canvasRenderContext2D.beginPath();
      canvasRenderContext2D.moveTo(this.space, 0);
      canvasRenderContext2D.lineTo(this.space + this.h, 0);
      canvasRenderContext2D.lineTo(this.space + this.h - this.w, this.w);
      canvasRenderContext2D.lineTo(this.space + this.w, this.w);
      canvasRenderContext2D.closePath();
      canvasRenderContext2D.fillStyle = this.color;
      canvasRenderContext2D.fill();
    },
    leftTop (canvasRenderContext2D) {
      canvasRenderContext2D.beginPath();
      canvasRenderContext2D.moveTo(0, this.space);
      canvasRenderContext2D.lineTo(this.w, this.w + this.space);
      canvasRenderContext2D.lineTo(this.w, this.space + this.h - this.w);
      canvasRenderContext2D.lineTo(0, this.space + this.h);
      canvasRenderContext2D.closePath();
      canvasRenderContext2D.fillStyle = this.color;
      canvasRenderContext2D.fill();
    }
  }
}
</script>

<style scoped>

</style>

分享请加上我的链接
https://www.cnblogs.com/smallZoro/p/12803716.html