html5星空鼠标特效代码实现

HTML5 可以通过 Canvas 元素来实现星空鼠标特效。以下是一个简单的实现：

1. 在 HTML 页面中添加一个 Canvas 元素。例如：

<canvas id="myCanvas" style="background-color: black;"></canvas>

2. 在 JavaScript 中编写绘制星空特效的函数 draw()。该函数应该首先获取 Canvas 元素，并为其设置宽度和高度。然后，函数应该在 Canvas 上绘制多个随机位置和大小的白色圆点，以模拟星空效果。例如：

function draw() {
  var canvas = document.getElementById("myCanvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "white";
  for (var i = 0; i < 100; i++) {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var r = Math.random() * 2;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fill();
  }
}

3. 在 JavaScript 中编写一个函数 mouseMove(event)，以响应鼠标移动事件。该函数应该获取鼠标的位置，并在 Canvas 上绘制多个随机位置和大小的彩色圆点，以模拟星空鼠标特效。例如：

function mouseMove(event) {
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  var r = Math.random() * 5 + 5;
  var x = event.clientX;
  var y = event.clientY;
  var gradient = ctx.createRadialGradient(x, y, 0, x, y, r);
  gradient.addColorStop(0, "white");
  gradient.addColorStop(1, "blue");
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, 2 * Math.PI);
  ctx.fill();
}

4. 在 JavaScript 中添加事件监听器，以监听鼠标移动事件，并调用 mouseMove(event) 函数。例如：

var canvas = document.getElementById("myCanvas");
canvas.addEventListener("mousemove", mouseMove);

这样，当鼠标在 Canvas 上移动时，星空鼠标特效将会自动启动并在 Canvas 上绘制。 需要注意的是，以上代码仅仅是一个简单的示例，实际的星空鼠标特效可能需要更加复杂的代码来实现。此外，你还可以通过调整圆点的颜色、大小、透明度等属性，以及在 Canvas 上添加其他元素，来进一步定制星空鼠标特效。