实现模拟网络流量的随机振幅Canvas无限动态线条

你的现有代码基于正弦波生成的轨迹完全可预测，要实现随机且连续的动态线条，核心是使用连续噪声算法（比如Perlin Noise）——它能生成自然连贯的随机曲线，同时通过偏移参数实现无限滚动效果。以下是修改后的完整代码：

<canvas id="myCanvas" width="800" height="400"></canvas>

canvas {
  display: block;
  margin: 0 auto;
  background-color: #f0f0f0;
}

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let xOffset = 0;
const noiseScale = 0.01; // 控制噪声波动的频率，值越小波动越平缓
const amplitude = 100; // 控制波动幅度
const speed = 2; // 滚动速度

// 简化版Perlin Noise实现，生成连续随机值
function noise(x) {
  const floorX = Math.floor(x);
  const fracX = x - floorX;
  const fade = fracX * fracX * (3 - 2 * fracX);
  
  const p0 = Math.sin(floorX) * 10000;
  const p1 = Math.sin(floorX + 1) * 10000;
  
  return p0 * (1 - fade) + p1 * fade;
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);

  for (let x = 0; x < canvas.width; x++) {
    // 用噪声计算y值，结合xOffset实现滚动
    const noiseValue = noise((x + xOffset) * noiseScale);
    // 归一化噪声值到[-1,1]区间，再乘以幅度
    const normalizedNoise = (noiseValue - -10000) / (10000 - -10000) * 2 - 1;
    const y = canvas.height / 2 + normalizedNoise * amplitude;
    ctx.lineTo(x, y);
  }

  ctx.strokeStyle = '#000';
  ctx.lineWidth = 2;
  ctx.stroke();

  xOffset += speed;

  requestAnimationFrame(animate);
}

animate();

关键说明 #

• 连续噪声算法：避免直接用Math.random()导致线条断裂，生成的随机值是平滑过渡的，让曲线更自然。
• 参数调整：
  • noiseScale：值越小，线条波动越平缓；值越大，波动越密集细碎。
  • amplitude：控制线条上下摆动的最大幅度。
  • speed：调整线条整体滚动的快慢。
• 无限循环：通过持续增加xOffset，让噪声计算的输入不断变化，实现无断点的无限滚动效果。

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