用html js实现页面鼠标流星特效

好的，下面是实现流星特效的代码：

首先，在 HTML 中添加一个画布：

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

然后，使用 JavaScript 来绘制流星：

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

var star = {
  x: 0,
  y: 0,
  size: 0,
  speed: 0,
  angle: 0,
};

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

  // 绘制流星
  ctx.beginPath();
  ctx.moveTo(star.x, star.y);
  ctx.lineTo(star.x - star.size * Math.cos(star.angle), star.y - star.size * Math.sin(star.angle));
  ctx.strokeStyle = "#fff";
  ctx.stroke();
}

function update() {
  // 更新流星位置
  star.x -= star.speed * Math.cos(star.angle);
  star.y -= star.speed * Math.sin(star.angle);

  // 判断是否超出画布，超出则重新生成流星
  if (star.x < 0 || star.y < 0 || star.x > canvas.width || star.y > canvas.height) {
    star.x = Math.random() * canvas.width;
    star.y = -20;
    star.size = Math.random() * 4 + 1;
    star.speed = Math.random() * 10 + 5;
    star.angle = Math.random() * Math.PI / 4 - Math.PI / 8;
  }
}

function loop() {
  draw();
  update();
  requestAnimationFrame(loop);
}

loop();

代码解释：

1. 首先获取画布和上下文对象。

2. 定义一个 `star` 对象，包含流星的位置、大小、速度和角度等属性。

3. 实现 `draw` 函数，用于绘制流星。

4. 实现 `update` 函数，用于更新流星的位置。

5. 实现 `loop` 函数，用于循环绘制和更新流星。

6. 调用 `loop` 函数启动动画循环。

注意：这只是一个简单的实现，如果想要更加逼真的流星特效，可以尝试添加拖尾效果、调整流星的颜色和长度等。