Canvas+JS代码实现跟随鼠标移动的小星星效果

1、新建一个名为 canvasStar.js的文件
2、右键打开该 js 文件，把下面代码复制进去：

window.addEventListener("load", () => {
  var canvas = document.querySelector("#canvas");
  var ctx = canvas.getContext("2d");
  window.onresize = resizeCanvas;
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resizeCanvas();
  canvas.style.cssText = `
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    `;
  var arr = [];
  var colours = ["#ffff00", "#66ffff", "#3399ff", "#99ff00", "#ff9900"];
  window.addEventListener("mousemove", (e) => {
    arr.push({
      x: e.clientX,
      y: e.clientY,
      r: Math.random() * 0.5 + 1.5,
      td: Math.random() * 4 - 2,
      dx: Math.random() * 2 - 1,
      dy: Math.random() * 1 + 1,
      rot: Math.random() * 90 + 90,
      color: colours[Math.floor(Math.random() * colours.length)],
    });
  });
  function star(x, y, r, l, rot) {
    ctx.beginPath();
    for (let i = 0; i < 5; i++) {
      ctx.lineTo(
        Math.cos(((18 + i * 72 - rot) * Math.PI) / 180) * r + x,
        -Math.sin(((18 + i * 72 - rot) * Math.PI) / 180) * r + y,
      );
      ctx.lineTo(
        Math.cos(((54 + i * 72 - rot) * Math.PI) / 180) * l + x,
        -Math.sin(((54 + i * 72 - rot) * Math.PI) / 180) * l + y,
      );
    }
    ctx.closePath();
  }
  function draw() {
    for (let i = 0; i < arr.length; i++) {
      let temp = arr[i];
      star(temp.x, temp.y, temp.r, temp.r * 3, temp.rot);
      ctx.fillStyle = temp.color;
      ctx.strokeStyle = temp.color;
      ctx.lineWidth = 0.1;
      ctx.lineJoin = "round";
      ctx.fill();
      ctx.stroke();
    }
  }
  function update() {
    for (let i = 0; i < arr.length; i++) {
      arr[i].x += arr[i].dx;
      arr[i].y += arr[i].dy;
      arr[i].rot += arr[i].td;
      arr[i].r -= 0.015;
      if (arr[i].r < 0) {
        arr.splice(i, 1);
      }
    }
  }
  setInterval(() => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    draw();
    update();
  }, 20);
});

3、引入JS文件在的路径

<script src="canvasStar.js"></script>

4、在body里添该加标签

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

以上就完成了~

总结：
这样在你的网页就可以直接看到跟随鼠标移动的小星星效果了。