使用画布和css画一个星星闪烁的背景图

好的，下面是一个使用画布和CSS实现星星闪烁的背景图的示例代码：

HTML：

<canvas id="stars"></canvas>
<div class="background"></div>

CSS：

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#stars {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;
}

JavaScript：

var canvas = document.getElementById('stars');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var stars = [];

for (var i = 0; i < 100; i++) {
  stars.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 1.5 + 0.5,
    alpha: Math.random() * 0.5 + 0.5,
    direction: Math.random() < 0.5 ? -1 : 1
  });
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length; i++) {
    var star = stars[i];

    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
    ctx.fillStyle = 'rgba(255, 255, 255,' + star.alpha + ')';
    ctx.fill();

    star.x += star.direction * 0.1;

    if (star.x < 0 || star.x > canvas.width) {
      star.direction = -star.direction;
    }
  }

  requestAnimationFrame(draw);
}

draw();

这个代码将创建一个画布和一个半透明的黑色背景，并在画布上绘制100个随机闪烁的星星。星星将根据随机方向以0.1的速度移动，当星星到达画布的边缘时将改变方向。通过动画循环绘制星星，使其闪烁。

请注意，此示例代码的效果可能因浏览器和设备而异，具体效果可能需要根据您的具体需求进行调整。