当前位置：首页 > 文章列表 > 文章 > 前端 > JS制作网页背景动画步骤详解

JS制作网页背景动画步骤详解

2025-11-09 10:38:54 0浏览收藏

1. 创建画布并设置全屏覆盖

使用 HTML5 的 canvas 元素来绘制动画背景，它性能好且适合图形渲染。

在 HTML 中添加：

然后通过 CSS 让画布铺满整个页面，并置于底层：

#bgCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* 确保在内容下方 */ pointer-events: none; /* 避免遮挡点击事件 */ }

2. 初始化 Canvas 和上下文

在 JavaScript 中获取 canvas 并设置绘图环境：

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

// 动态适配屏幕尺寸 function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } resizeCanvas(); window.addEventListener('resize', resizeCanvas);

3. 创建粒子系统

定义一组粒子对象，每个粒子有位置、速度和大小等属性。

let particles = []; const particleCount = 100;

4. 绘制粒子与连接线

每帧清空画布，重绘画粒子，并在距离近的粒子之间画连线，营造科技感。

function drawParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#ffffff'; ctx.strokeStyle = '#ffffff33';

// 绘制每个粒子 particles.forEach(p => { ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fill();

// 连接附近粒子
particles.forEach(other => {
  const dist = Math.hypot(p.x - other.x, p.y - other.y);
  if (dist < 100) {
    ctx.beginPath();
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(other.x, other.y);
    ctx.stroke();
  }
});

// 更新位置（碰到边缘反弹）
if (p.x <= 0 || p.x >= canvas.width) p.dx *= -1;
if (p.y <= 0 || p.y >= canvas.height) p.dy *= -1;
p.x += p.dx;
p.y += p.dy;

});

requestAnimationFrame(drawParticles); }