动态波浪，让你的网站跃动起来！

2023-10-04 19:49:51

在网页设计中，添加动态效果可以使网站更加生动有趣，吸引用户的注意力。其中，dribble风格的水波浪效果因其优美的视觉效果而备受欢迎。本文将详细介绍如何使用canvas绘制dribble风格的水波浪，帮助你轻松创建出令人印象深刻的动态波浪效果。

1. 准备工作

在开始绘制水波浪之前，我们需要做一些准备工作。首先，你需要创建一个HTML文件，并在其中包含必要的脚本文件，包括canvas库和绘图函数。

<!DOCTYPE html>
<html>
<head>
  
  <script src="canvas.js"></script>
  <script src="drawing.js"></script>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

接下来，你需要创建一个名为canvas.js的文件，并在其中包含以下代码：

// 定义canvas元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 设置canvas的宽高
canvas.width = 500;
canvas.height = 500;

// 创建一个绘图函数
function draw() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制波浪
  for (var i = 0; i < 10; i++) {
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    ctx.quadraticCurveTo(canvas.width / 2, canvas.height / 2 + i * 10, canvas.width, canvas.height / 2);
    ctx.lineTo(canvas.width, canvas.height);
    ctx.lineTo(0, canvas.height);
    ctx.closePath();
    ctx.fillStyle = 'blue';
    ctx.fill();
  }

  // 请求浏览器调用draw函数
  requestAnimationFrame(draw);
}

// 调用draw函数
draw();

2. 绘制波浪

现在，我们可以开始绘制水波浪了。首先，你需要创建一个for循环，以便为每个波浪创建一个新的路径。在循环中，你需要使用quadraticCurveTo()方法创建一个二次贝塞尔曲线，该曲线将从画布的左边缘开始，然后上升到画布的中间，最后下降到画布的右边缘。

for (var i = 0; i < 10; i++) {
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);
  ctx.quadraticCurveTo(canvas.width / 2, canvas.height / 2 + i * 10, canvas.width, canvas.height / 2);
  ctx.lineTo(canvas.width, canvas.height);
  ctx.lineTo(0, canvas.height);
  ctx.closePath();
}