2024年vue canvas绘制信令图，动态显示标题、宽度、高度，开发web前端学习

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

    var maxWidth = 260; // 最大宽度，超过这个宽度会自动换行
    var words = v.showInfo.split("\r\n");

    // 文字自动换行
    this.wrapText(
      v,
      context,
      words,
      this.gapX * (k < j ? k : j) + this.paddingLeft,
      height - 10,
      maxWidth,
      this.lineHeight
    );

    if (i < this.xlArr.length - 1) {
      let nextWords = this.xlArr[i + 1].showInfo.split("\r\n");
      height += (this.lineHeight * (words.length + nextWords.length)) / 2 + 30;
    } else {
      height += this.lineHeight * words.length + 30;
    }
    // console.log(height, "height")
  })
  // 画虚线以及标题
  this.typeArr.map((v, i) => {
    this.paintText(context, v, i);
    setTimeout(() => {
      this.drawDashed(context, i);
    }, 300)
  })

  // document.getElementById('container').onscroll = (e) => {
  //   // console.log('e:', e.target)
  //   this.left = e.target.scrollLeft
  // }
  // 屏蔽所有页面 右键菜单
  // document.oncontext