当前位置：首页 > 文章列表 > 文章 > 前端 > JS实现波浪动画的3种数学方法

JS实现波浪动画的3种数学方法

2025-06-28 21:53:54 0浏览收藏

解决方案

要实现JS波浪动画，主要分为以下几个步骤：

创建Canvas元素: 在HTML中添加一个canvas元素，设置其宽度和高度。
获取Canvas上下文: 使用getContext('2d')方法获取2D渲染上下文。
定义波浪参数: 包括波的振幅(amplitude)、频率(frequency)、波长(wavelength)、速度(speed)、以及初始相位(phase)。
编写绘制函数: 根据数学模型计算波浪的每个点的y坐标，然后使用canvas的绘图API（moveTo、lineTo等）绘制波浪线。
动画循环: 使用requestAnimationFrame方法创建一个动画循环，不断更新波浪的相位，并重新绘制波浪。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = 200; // 调整高度，让波浪更明显

const wave = {
  amplitude: 20, // 振幅
  frequency: 0.02, // 频率
  wavelength: 200, // 波长
  speed: 0.02, // 速度
  phase: 0 // 初始相位
};

function drawWave() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2); // 起始点

  for (let x = 0; x < canvas.width; x++) {
    const y = canvas.height / 2 + wave.amplitude * Math.sin(wave.frequency * x + wave.phase);
    ctx.lineTo(x, y);
  }

  ctx.strokeStyle = 'blue';
  ctx.stroke();
  ctx.closePath();

  wave.phase += wave.speed; // 更新相位
  requestAnimationFrame(drawWave); // 循环
}

drawWave();

如何调整波浪的颜色和透明度，让动画更美观？

在drawWave函数中，可以修改ctx.strokeStyle属性来改变波浪的颜色。可以使用颜色名称（如'blue'、'red'），也可以使用RGB、RGBA、HSL、HSLA等颜色表示方法。要调整透明度，可以使用RGBA颜色，并设置alpha通道的值。

ctx.strokeStyle = 'rgba(0, 123, 255, 0.5)'; // 半透明蓝色

还可以使用ctx.fillStyle属性来填充波浪的内部，配合透明度可以创建出更丰富的视觉效果。例如，可以添加一个渐变色填充：

const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, 'rgba(0, 123, 255, 0.2)');
gradient.addColorStop(1, 'rgba(0, 123, 255, 0)');
ctx.fillStyle = gradient;
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.fill();

如何使用多个波浪叠加，创建更复杂的波浪效果？

叠加多个波浪是创建复杂波浪效果的常用方法。可以定义多个wave对象，每个对象拥有不同的振幅、频率、速度和相位。然后在drawWave函数中，将每个波浪的y坐标叠加起来，再绘制到canvas上。

const wave1 = { amplitude: 20, frequency: 0.02, wavelength: 200, speed: 0.02, phase: 0, color: 'rgba(0, 123, 255, 0.5)' };
const wave2 = { amplitude: 15, frequency: 0.03, wavelength: 150, speed: 0.03, phase: Math.PI / 2, color: 'rgba(255, 0, 0, 0.5)' };

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

  drawSingleWave(wave1);
  drawSingleWave(wave2);

  wave1.phase += wave1.speed;
  wave2.phase += wave2.speed;

  requestAnimationFrame(drawWave);
}

function drawSingleWave(wave) {
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);

  for (let x = 0; x < canvas.width; x++) {
    const y = canvas.height / 2 + wave.amplitude * Math.sin(wave.frequency * x + wave.phase);
    ctx.lineTo(x, y);
  }

  ctx.strokeStyle = wave.color;
  ctx.stroke();
  ctx.closePath();
}

drawWave();

除了正弦函数，还有哪些数学模型可以用来创建波浪动画？

除了正弦函数，还可以使用余弦函数、贝塞尔曲线等数学模型来创建波浪动画。

余弦函数: 与正弦函数类似，只是相位不同。y = amplitude * Math.cos(frequency * x + phase)。
贝塞尔曲线: 可以使用贝塞尔曲线来创建更平滑、更自然的波浪效果。需要控制贝塞尔曲线的控制点，使其呈现波浪的形状。
噪声函数 (Perlin Noise, Simplex Noise): 噪声函数可以生成随机但连续的值，可以用来模拟更真实、更不规则的波浪。

使用噪声函数需要引入额外的库，例如simplex-noise。

import SimplexNoise from 'simplex-noise';

const simplex = new SimplexNoise();

function drawWave() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);

  for (let x = 0; x < canvas.width; x++) {
    const y = canvas.height / 2 + wave.amplitude * simplex.noise2D(x * wave.frequency, wave.phase) * 50; // 乘以一个系数，调整噪声的强度
    ctx.lineTo(x, y);
  }

  ctx.strokeStyle = 'blue';
  ctx.stroke();
  ctx.closePath();

  wave.phase += wave.speed;
  requestAnimationFrame(drawWave);
}

选择合适的数学模型取决于所需的波浪效果。正弦和余弦函数简单易用，适合创建规则的波浪。贝塞尔曲线可以创建更平滑的波浪。噪声函数可以创建更真实、更不规则的波浪。

今天关于《JS实现波浪动画的3种数学方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！