2024年Web前端最新vue canvas绘制信令图，动态显示标题、宽度、高度(1)，【面试必备】

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

        currentY = y - 6;
      } else if (len === 4) {
        currentY = y - 18;
      } else if (len === 5) {
        currentY = y - 28;
      } else if (len === 6) {
        currentY = y - 38;
      } else if (len === 7) {
        currentY = y - 48;
      }

      if (item.dataStatus == 1) {
        context.fillStyle = 'red'
      } else {
        context.fillStyle = '#000' // 字体颜色
      }
      // context.fillStyle = "#000"; // 字体颜色
      context.fillText(words[n], x + this.gapX / 2 - testWidth / 2, currentY);
      if (len > 1) {
        y += lineHeight;
      }
    } else {
      console.log(words[n], 2);
      // 文字超出一行，需要换行展示
      // 实际大于页面width font-size: 12, 计算出显示多少行
      let singleWordwith = 13;
      // 计算一行显示的最大字数，以及显示多少行
      let len = Math.floor(maxWidth / singleWordwith);
      let lineCount = Math.ceil(words[n].length / len);
      for (let j = 0; j <= lineCount; j++) {
        // 截取出每行显示的字
        let word = words[n].substr(j * len, len);
        let wordWidth = context.measureText(word).width;
        // 写入画布
        // 画背景色遮盖箭头, 背景色自己调，跟画布统一就行
        context.fillStyle = "#fff";
        context.fillRect(
          x + this.gapX / 2 - wordWidth / 2,
          y - 4,
          wordWidth,
          lineHeight
        ); // 填充黄色背景
        let currentY = y;
        if (lineCount === 2) {
          currentY = y + 2;
        } else if (lineCount === 3) {
          currentY = y - 6;
        } else if (lineCount === 4) {
          currentY = y - 18;
        } else if (lineCount === 5) {
          currentY = y - 28;
        } else if (lineCount === 6) {
          currentY = y - 38;
        } else if (lineCount === 7) {
          currentY = y - 48;
        }
        if (item.dataStatus == 1) {
          context.fillStyle = 'red'
        } else {
          context.fillStyle = '#000' // 字体颜色
        }
        // context.fillStyle = "#000";
        context.fillText(word, x + this.gapX / 2 - wordWidth / 2, currentY);
        y += lineHeight; // 换行
      }
    }
  }
},

### 六、模拟后端返回的数据

// signalTimeData: [
// {
// startDataDir: “ATP”,
// endDataDir: “MT”,
// recTime: ‘2023-09-10 09:12:48’,
// showInfo: “M136\r\nT_Train=9340940ms\r\nDT:16”,
// dataDir: 0,
// dataDirStr: “上行”,
// lineType: 0,
// dataStatus: 0
// },
// {
// startDataDir: “MT”,
// endDataDir: “ATP”,
// recTime: ‘2023-09-10 09:12:49’,
// showInfo: “M24\r\nT_Train=9341070ms”,
// dataDir: 1,
// dataDirStr: “下行”,
// lineType: 0,
// dataStatus: 0
// },
// {
// startDataDir: “ATP”,
// endDataDir: “MT”,
// recTime: ‘2023-09-10 09:13:06’,
// showInfo: “M136\r\nT_Train=9358940ms\r\nDT:19\r\n此时，M24之后ATP发送3条APDU”,
// dataDir: 0,
// dataDirStr: “上行”,
// lineType: 0,
// dataStatus: 1
// },
// {
// startDataDir: “MT”,
// endDataDir: “ATP”,
// recTime: ‘2023-09-10 09:13:07’,
// showInfo: “AK:20\r\n此时，M24之后RBC发送3条AK，无APDU”,
// dataDir: 1,
// dataDirStr: “下行”,
// lineType: 0,
// dataStatus: 1
// },
// {
// startDataDir: “ATP”,
// endDataDir: “MT”,
// recTime: ‘2023-09-10 09:13:08’,
// showInfo: “TPDU_DR/SaPDU_D”,
// dataDir: 0,
// dataDirStr: “上行”,
// lineType: 0,
// dataStatus: 1
// },
// {
// startDataDir: “MT”,
// endDataDir: “ATP”,
// recTime: ‘2023-09-10 09:13:09’,
// showInfo: “TPDU_DC”,
// dataDir: 1,
// dataDirStr: “下行”,
// lineType: 0,
// dataStatus: 0
// },
// {
// startDataDir: “ATP”,
// endDataDir: “MT”,
// recTime: “2023-09-10 09:13:09”,
// showInfo: “DISC”,
// dataDir: 0,
// dataDirStr: “上行”,
// lineType: 0,
// dataStatus: 0
// },
// {
// startDataDir: “MT”,
// endDataDir: “ATP”,
// recTime: “2023-09-10 09:13:09”,
// showInfo: “NO CARRIER”,
// dataDir: 1,
// dataDirStr: “下行”,
// lineType: 0,
// dataStatus: 0
// }
// ],

**全部代码如下:**