如何优化HTML Canvas底层线条绘制效果？寻求替代实现方案

一、优化Canvas实现代码 #

当前代码的核心问题是元素位置计算错误（依赖offsetTop/offsetLeft相对父元素的偏移，而非相对于Canvas的绝对位置），以及缺少基础线条样式配置。以下是修正后的代码：

修正后的JavaScript #

const container = document.querySelector(".container");
const canvas = document.querySelector("canvas");
const containerRect = container.getBoundingClientRect();

// 设置Canvas尺寸匹配容器实际大小
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
const ctx = canvas.getContext("2d");
ctx.lineWidth = 2; // 增加线条宽度，提升视觉清晰度

const photo = document.querySelector(".photo");
const photoRect = photo.getBoundingClientRect();
const levels = document.querySelectorAll(".levels div");
const colors = getComputedStyle(document.documentElement);

// 绘制左侧照片层级到中间的横向线条
levels.forEach((level, index) => {
  const levelIndex = index + 1;
  const levelRect = level.getBoundingClientRect();
  // 计算相对于Canvas的Y坐标：元素绝对位置减去容器绝对位置
  const y = levelRect.top + levelRect.height / 2 - containerRect.top;
  const startX = photoRect.width; // 照片右侧边缘作为起点
  const endX = photoRect.width + levelIndex * 10; // 向右延伸的终点位置

  ctx.beginPath();
  ctx.strokeStyle = colors.getPropertyValue(`--level-${levelIndex}`).trim();
  ctx.moveTo(startX, y);
  ctx.lineTo(endX, y);
  ctx.stroke();
});

const personRect = document.querySelector(".person").getBoundingClientRect();
const boxes = document.querySelectorAll(".box");

// 绘制中间到右侧问题框的横向线条
boxes.forEach((box, index) => {
  const boxIndex = index + 1;
  const dot = box.querySelector(".dot");
  const dotRect = dot.getBoundingClientRect();
  // 计算相对于Canvas的坐标
  const y = dotRect.top + dotRect.height / 2 - containerRect.top;
  const startX = photoRect.width + boxIndex * 10; // 和左侧线条终点衔接
  const endX = dotRect.left - containerRect.left; // 问题框dot的左侧边缘作为终点

  ctx.beginPath();
  ctx.strokeStyle = colors.getPropertyValue(`--level-${boxIndex}`).trim();
  ctx.moveTo(startX, y);
  ctx.lineTo(endX, y);
  ctx.stroke();
});

// 添加窗口 resize 监听，确保窗口变化时线条重绘
window.addEventListener('resize', () => {
  canvas.width = container.offsetWidth;
  canvas.height = container.offsetHeight;
  // 此处可将绘制逻辑封装为函数，避免代码重复
});

关键修正点 #

• 使用getBoundingClientRect()获取元素绝对位置，计算相对于Canvas的精准坐标
• 设置ctx.lineWidth让线条更清晰
• 修正线条端点对齐逻辑，确保和照片层级、问题框的dot精准连接
• 添加窗口resize监听，适配窗口尺寸变化

二、纯CSS替代方案（无需Canvas，更简便） #

通过CSS伪元素和定位，可完全实现相同连线效果，无需JavaScript，维护性更高：

修改后的HTML（为层级元素添加连线节点） #

在每个.level-*元素内添加<span class="line"></span>，用于生成左侧连线：

<div class="levels">
  <div class="level-1" style="background-color: var(--level-1)">
    <span class="line"></span>
  </div>
  <div class="level-2" style="background-color: var(--level-2)">
    <span class="line"></span>
  </div>
  <div class="level-3" style="background-color: var(--level-3)">
    <span class="line"></span>
  </div>
  <div class="level-4" style="background-color: var(--level-4)">
    <span class="line"></span>
  </div>
  <div class="level-5" style="background-color: var(--level-5)">
    <span class="line"></span>
  </div>
  <div class="level-6" style="background-color: var(--level-6)">
    <span class="line"></span>
  </div>
  <div class="level-7" style="background-color: var(--level-7)">
    <span class="line"></span>
  </div>
</div>

添加CSS样式 #

/* 左侧照片层级的连线样式 */
.person .photo .levels [class^="level"] {
  flex: 1;
  opacity: 0.8;
  position: relative;
  overflow: visible;
}

.person .photo .levels [class^="level"] .line {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 2px;
  background-color: inherit;
  width: calc(var(--line-offset) + 100px); /* 线条总长度=偏移量+基础长度 */
  z-index: -1;
}

/* 为每个层级设置递增的偏移量 */
.level-1 .line { --line-offset: 0px; }
.level-2 .line { --line-offset: 10px; }
.level-3 .line { --line-offset: 20px; }
.level-4 .line { --line-offset: 30px; }
.level-5 .line { --line-offset: 40px; }
.level-6 .line { --line-offset: 50px; }
.level-7 .line { --line-offset: 60px; }

/* 右侧问题框的连线样式 */
.questions .box::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(-100px - var(--line-offset)); /* 和左侧线条精准衔接 */
  width: calc(100px + var(--line-offset));
  height: 2px;
  background-color: inherit;
  z-index: -1;
}

/* 为每个问题框设置对应层级的偏移量 */
.question-1::before { --line-offset: 0px; }
.question-2::before { --line-offset: 10px; }
.question-3::before { --line-offset: 20px; }
.question-4::before { --line-offset: 30px; }
.question-5::before { --line-offset: 40px; }
.question-6::before { --line-offset: 50px; }
.question-7::before { --line-offset: 60px; }

方案优势 #

• 无需JavaScript，纯CSS实现，性能更优
• 自适应布局，窗口尺寸变化时自动适配
• 代码简洁，颜色和偏移量通过CSS变量统一控制，维护成本低

内容的提问来源于stack exchange，提问作者Asher