基础使用：HTML、CSS和JavaScript来实现流动波浪HTML5特效

以下是一个基本的使用HTML、CSS和JavaScript来实现流动波浪HTML5特效的示例代码：

HTML代码：

<div class="wave-container">
  <canvas id="wave-canvas"></canvas>
</div>

CSS代码：

.wave-container {
  position: relative;
  width: 100%;
  height: 200px;
  background-color: #fff;
}

#wave-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript代码：

// 模站无忧提供技术支持 获取canvas元素和绘图上下文
var canvas = document.getElementById("wave-canvas");
var ctx = canvas.getContext("2d");

// 设置canvas的宽度和高度
canvas.width = window.innerWidth;
canvas.height = 200;

// 定义变量
var waveSpeed = 0.1; // 波浪速度
var waveHeight = 25; // 波浪高度
var waveWidth = 0.025; // 波浪宽度
var waves = []; // 存储所有的波浪

// 初始化波浪数组
for (var i = 0; i < 3; i++) {
  var wave = {
    amplitude: Math.random() * waveHeight + waveHeight,
    frequency: Math.random() * waveWidth + waveWidth,
    offset: Math.random() * canvas.width
  };
  waves.push(wave);
}

// 动画函数
function animate() {
  requestAnimationFrame(animate);

  // 清空之前的绘制
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制每个波浪
  for (var i = 0; i < waves.length; i++) {
    var wave = waves[i];

    // 开始路径
    ctx.beginPath();

    // 绘制第一个点
    ctx.moveTo(0, canvas.height / 2);

    // 绘制曲线上的每一个点
    for (var x = 0; x < canvas.width; x += 10) {
      var y =
        wave.amplitude *
        Math.sin(wave.frequency * x + wave.offset + waveSpeed * Date.now() * 0.01);
      ctx.lineTo(x, canvas.height / 2 + y);
    }

    // 绘制最后一个点和下半部分的线条
    ctx.lineTo(canvas.width, canvas.height / 2);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.lineTo(0, canvas.height / 2);

    // 填充颜色
    var color = "rgba(0, 200, 255, 0.2)";
    ctx.fillStyle = color;
    ctx.fill();
  }
}

// 开始动画
animate();

解释说明：

1. HTML中创建了一个包裹canvas元素的div容器，并设置canvas元素的id为”wave-canvas”。

2. CSS中设置了容器的宽度、高度和背景颜色，并将canvas元素设置为绝对定位，撑满整个容器。

3. JavaScript代码中先获取了canvas元素和绘图上下文，并设置了canvas的宽度和高度。

4. 定义了一些变量用于控制波浪的速度、高度、宽度和波浪数组。

5. 初始化波浪数组，生成三个随机波浪。

6. 实现了一个动画函数，用于绘制每个波浪。在动画函数中，首先清空之前的绘图，然后绘制每个波浪。

7. 在绘制波浪时，使用Math.sin()函数计算曲线上的每个点，并使用context API绘制每个点之间的线条，最后填充波浪的颜色。

8. 最后，调用animate()函数并传入requestAnimationFrame()，实现波浪的流动效果。

需要注意的是，该示例代码仅作为实现流动波浪HTML5特效的基础示例，如需更加丰富的特效效果，还需进一步学习和实践。

原创文章：https://mz5u.cn/366.html

模站无忧代码演示：