2024年vue canvas绘制信令图，动态显示标题、宽度、高度(1)，CSS外边距塌陷问题

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

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

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

  } else {
    document.getElementById("myCanvas").height = minHeight;
  }
  var height = this.paddingTop + 62; // 初始值
  this.xlArr.map((v, i) => {
    const k = this.typeArr.indexOf(v.startDataDir);
    const j = this.typeArr.indexOf(v.endDataDir);
    context.font = '13px "微软雅黑"'; // 设置字体
    // 时间文字
    context.fillStyle = '#000' // 时间颜色
    context.fillText(v.recTime.split(' ')[1], 40, height);

    // 箭头
    this.paintArr(
      v,
      [this.gapX * k + this.paddingLeft, height],
      [this.gapX * j + this.paddingLeft, height],
      k < j ? "right" : "left",
      context
    );

    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) {