canvas简约全屏悬浮星空背景动画特效

以下是一个简单的canvas全屏星空背景动画特效的示例代码，你可以将其添加到你的网站中：

HTML代码：

<canvas id="canvas"></canvas>

CSS代码：

html,
body {
  height: 100%;
  overflow: hidden;
}

canvas {
  display: block;
}

JavaScript代码：

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

let width, height, stars;

function initializeCanvas() {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
  stars = [];
  
  for (let i = 0; i < 1000; i++) {
    stars.push({
      x: Math.random() * width,
      y: Math.random() * height,
      size: Math.random() * 3
    });
  }
}

function drawStars() {
  context.fillStyle = '#000';
  context.fillRect(0, 0, width, height);
  context.fillStyle = '#fff';
  for (let i = 0; i < stars.length; i++) {
    const star = stars[i];
    context.beginPath();
    context.arc(star.x, star.y, star.size, 0, Math.PI * 2);
    context.fill();
  }
}

function animate() {
  drawStars();
  requestAnimationFrame(animate);
}

initializeCanvas();
animate();

window.addEventListener('resize', function() {
  initializeCanvas();
});

这段代码会在canvas上绘制1000个白色的星星，星星的位置和大小是随机生成的，并且背景颜色为黑色。通过requestAnimationFrame()方法实现动画效果。当窗口大小改变时，画布也会相应地更新。