Canvas绘制文字示例

<template>
  <div id="system-run-status-con"
       class=""
       style="width: 100%; height: 100%;"
       ref="srsCanvas"
  >
  </div>
</template>

<script>
export default {
   data () {
      // 系统运行状态信息
      sysRunInfo: "当前运行状况良好，无故障待处理",
      isSysRunHealth: false,

      // Deprecated
      canvasWidth: null,
      canvasHeight: null,
      sysRunInfoShow: 1,
      canvasPoints: [],
      canvasCtx: null
   },
   methods: {
       initCanvasWH: function () {
        this.canvasWidth = document.getElementById('system-run-status-chart').clientWidth;
        this.canvasHeight = document.getElementById('system-run-status-chart').clientHeight;
      },
      drawCanvasText: function () {
        let that = this;
        that.isHealth = false;

        isHealth.initCanvasWH();

        debugger
        let canvas = isHealth.$refs.srsCanvas;
        // 获取上下文
        this.context = canvas.getContext('2d');
        canvas.width = this.canvasWidth;
        canvas.height = this.canvasHeight;
        // 绘制文字
        const font = '当前运行状况良好\n\n无故障待处理';
        this.context.clearRect(0, 0, canvas.width, canvas.height);
        this.context.save(); // 保存
        // 绘制视窗
        this.context.beginPath();

        this.context.font = '0.26rem Verdana';
        // 创建渐变
        let gradient = this.context.createLinearGradient(0, 0, canvas.width, 0);
        /*gradient.addColorStop(0, 'magenta');
        gradient.addColorStop(0.5, 'blue');
        gradient.addColorStop(1.0, 'red');*/
        gradient.addColorStop(0, 'rgb(201, 62, 255)');
        gradient.addColorStop(0.5, 'rgb(137, 150, 254)');
        gradient.addColorStop(1.0, 'rgb(81, 247, 253)');
        // 用渐变色
        this.context.fillStyle = gradient;
        // measureText方法获取文字的宽度,为了能够在画布中间绘制文字.
        const measure = this.context.measureText(font);

        this.context.fillText(font, (this.canvasWidth - measure.width)/2, this.canvasHeight/2);

        this.context.restore(); // 状态恢复


        // 延迟清除画布
        /*setTimeout(function () {
          that.context.clearRect(0, 0, canvas.width, canvas.height);
          that.sysRunInfoShow = true;
        }, 3000);*/
      }
   }
}

</script>

<style>

</style>