文字效果如下:

这里是使用到HTML5的 canvas 编辑文字的方法

主要应用canvas图片背景渐变到文字的原理

这里文字渐变使用到的背景图如下：

1、在vue项目中新建组件 命名 textColor.vue

2、在textColor.vue组件下的代码如下：

<template>
  <div>
    <!-- 文字由上到下渐变色 -->
    <div>
      <canvas ref="canvas" width="230" height="32" class="text-color"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShowText: {
      // 监听传入组件的数值
      type: Number,
      default: -1,
    },
  },
  data() {
    return { showText: -1 };
  },
  watch: {
    isShowText: {
      handler(value) {
        // 监听文字
        this.showText = value;
        console.log("监听文字--->", this.showText);
        this.$nextTick(() => {
          // 重置画布
          this.recreateCanvas();
        });
      },
      // immediate: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      // 初次生产的画布
      const canvas = this.$refs.canvas;
      this.drawGradientText(canvas);
    });
  },
  methods: {
    recreateCanvas() {
      // 销毁旧画布
      const canvas = this.$refs.canvas;
      const context = canvas.getContext("2d");
      // 清空画布 通过绘制透明背景来清空画布。这种方法可以确保在 Vue 组件中处理 <canvas> 元素时没有报错。
      context.clearRect(0, 0, canvas.width, canvas.height);
      // 创建新画布
      const newCanvas = document.createElement("canvas");
      newCanvas.width = 230;
      newCanvas.height = 32;

      // 替换旧画布
      canvas.parentNode.replaceChild(newCanvas, canvas);

      // 更新 ref 引用
      this.$refs.canvas = newCanvas;

      // 在此处可以调用绘制新画布内容的函数
      this.drawGradientText(newCanvas);
    },
    drawGradientText(canvas) {
      const _that = this;
      const ctx = canvas.getContext("2d");
      // 应用图片背景渐变到文字
      let backgroundImage = new Image();
      backgroundImage.src = require("../../assets/images/textColor.png");
      backgroundImage.onload = function () {
        let pattern = ctx.createPattern(backgroundImage, "repeat");
        ctx.fillStyle = pattern;
        ctx.font = "32px bold";
        let textSum = _that.showText && _that.showText > 0 ? _that.showText : 0;
        const hasLength = String(textSum).length; //判断数字是多少位数的数字
        // 数字位移到画布的展示位置
        switch (hasLength) {
          case 1:
            ctx.fillText(`${textSum}`, 90, 28);
            break;
          case 2:
            ctx.fillText(`${textSum}`, 80, 28);
            break;
          case 3:
            ctx.fillText(`${textSum}`, 70, 28);
            break;
          case 4:
            ctx.fillText(`${textSum}`, 60, 28);
            break;
          case 5:
            ctx.fillText(`${textSum}`, 50, 28);
            break;
          case 6:
            ctx.fillText(`${textSum}`, 40, 28);
            break;
          case 7:
            ctx.fillText(`${textSum}`, 30, 28);
            break;
          case 8:
            ctx.fillText(`${textSum}`, 20, 28);
            break;
          case 9:
            ctx.fillText(`${textSum}`, 10, 28);
            break;
          default:
            ctx.fillText(`${textSum}`, 1, 28);
            break;
        }
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.text-color {
  width: 100%;
  height: 32px;
}
</style>

3、在父组件使用textColor.vue组件如下：

<template>
  <div>
    <textColor :isShowText="num && num > 0 ? num : 0" />
  </div>
</template>
<script>
import textColor from "@/views/components/textColor.vue";
export default {
  components: { textColor },
  data() {
    return { num: 0 };
  },
  methods: {},
};
</script>
<style scoped></style>