使用Canvas制作一个渐变背景的动画特效

在前端开发中，使用HTML的<canvas>元素和JavaScript可以创建一个具有渐变背景的动画特效。以下是一个简单的示例，展示了如何创建一个线性渐变背景，并使其颜色随着时间的推移而变化：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 渐变背景动画</title>
<style>
  body { margin: 0; overflow: hidden; }
  canvas { display: block; background: #000; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let hue = 0; // 用于控制颜色的变化

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布

  const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  gradient.addColorStop(0, `hsl(${hue}, 100%, 50%)`); // 渐变开始颜色
  gradient.addColorStop(1, `hsl(${hue + 120}, 100%, 50%)`); // 渐变结束颜色

  ctx.fillStyle = gradient; // 设置填充样式为渐变
  ctx.fillRect(0, 0, canvas.width, canvas.height); // 填充矩形，即整个画布

  hue = (hue + 1) % 360; // 更新颜色值，实现动画效果
}

setInterval(draw, 100); // 每100毫秒重绘一次，形成动画效果
</script>
</body>
</html>

这个示例中，我们使用createLinearGradient()方法创建了一个线性渐变，并使用addColorStop()方法添加了两个颜色停止点。然后，我们将这个渐变设置为画布的填充样式，并使用fillRect()方法填充整个画布。最后，我们使用setInterval()方法定期调用draw()函数，以更新渐变颜色并形成动画效果。

posted @ 2024-12-29 09:40  王铁柱6  阅读(136)  评论(0)    收藏  举报