如何用Canvas绘制全屏宽度横线，模拟CSS背景横向重复横线效果？

嘿，这个需求很直观，我来给你拆解一下怎么用Canvas实现和你给出的CSS效果一模一样的横向线条——而且还能保留Canvas的灵活性，方便后续调整样式或者做动态变化。

核心思路 #

本质上我们要做的就是在Canvas上绘制一条贯穿整个视口宽度的横线，位置固定在视口高度的10%处，并且在窗口大小改变时自动适配宽度。如果你的原始需求是重复多条横线（比如CSS的repeat-x用小图重复的效果），也可以基于这个逻辑扩展，先从单条横线的基础实现说起。

完整实现代码 #

HTML 结构

首先我们需要一个铺满整个屏幕的Canvas元素，用CSS让它固定在视口顶部，避免滚动影响页面其他内容：

<canvas id="horizontalLineCanvas"></canvas>

<style>
#horizontalLineCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 让Canvas不遮挡页面其他元素的交互 */
  pointer-events: none;
}
</style>

JavaScript 逻辑

接下来写绘制逻辑，关键是要确保Canvas的绘图尺寸和显示尺寸一致（避免线条模糊），并且监听窗口 resize 事件来重新适配：

// 获取Canvas元素和绘图上下文
const canvas = document.getElementById('horizontalLineCanvas');
const ctx = canvas.getContext('2d');

// 定义绘制线条的函数
function drawHorizontalLine() {
  // 同步Canvas的绘图尺寸和当前视口大小
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  // 计算线条的Y坐标：对应CSS里的background-position: 0px 10%
  const lineY = window.innerHeight * 0.1;

  // 设置线条样式（可根据需求调整颜色、宽度、虚线样式等）
  ctx.strokeStyle = '#000'; // 线条颜色
  ctx.lineWidth = 1; // 线条宽度
  // 要是想做虚线，就加这句：ctx.setLineDash([5, 3]);

  // 绘制横线
  ctx.beginPath();
  ctx.moveTo(0, lineY); // 起点：视口左侧，Y轴目标位置
  ctx.lineTo(canvas.width, lineY); // 终点：视口右侧，Y轴位置不变
  ctx.stroke(); // 执行绘制
}

// 页面加载完成后首次绘制
drawHorizontalLine();

// 监听窗口大小变化，重新绘制以适配新视口
window.addEventListener('resize', drawHorizontalLine);

如果需要重复多条横线（类似CSS repeat-x的多线效果） #

如果你要的是像背景图重复那样的密集横线，只需要在绘制函数里加个循环就行，比如每隔20px绘制一条：

function drawRepeatingHorizontalLines() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 1;

  // 定义每条线的间距
  const lineGap = 20;
  // 从顶部开始，每隔lineGap绘制一条线
  for (let y = 0; y < canvas.height; y += lineGap) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(canvas.width, y);
    ctx.stroke();
  }
}

为什么选Canvas？ #

当然你原来的CSS方案已经很简单，但如果之后需要：

• 动态修改线条颜色/宽度
• 给线条加动画（比如滚动时改变位置、线条渐变）
• 绘制不规则线条（比如虚线、波浪线）
  Canvas的灵活性就体现出来了，完全可以按需调整。

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