5.1.2 跟随鼠标指针移动的小星星
在本节中，我们会实现一个Web版的特效，当鼠标指针在页面上移动时，会有很多彩色的小星星跟着鼠标指针的轨迹移动，并且不断散落，效果如图5-2所示。
图5-2 跟随鼠标指针移动的小星星的效果
根据要实现的Web特效的功能，可以向ChatGPT提供如下文字。
使用HTML、CSS和JavaScript实现一个Web特效。页面的背景是黑色的，鼠标指针在页面中移动，有一些彩色的小星星会随着鼠标指针移动，并形成移动轨迹的同时不断洒落。将CSS和JavaScript文件都放到.html文件中。给出完整的实现代码和中文注释。
如果不想生成多个文件，可以要求ChatGPT将.css文件和JavaScript文件放到.html文件中。
ChatGPT会根据上面的提示文字给出下面的代码。
代码位置：src/web/stars.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星星特效</title>
<style>
/* 设置背景颜色为黑色 */
body, html, #canvas {
background-color: black;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 创建一个画布用于绘制星星 -->
<canvas id="canvas"></canvas>
<script>
// 获取画布并设置其大小
const canvas = document.getElementById("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d");
// 星星数组
const stars = [];
// 创建星星的构造函数
function Star(x, y, radius, color, velocity) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.velocity = velocity;
}
// 绘制星星
Star.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
// 更新星星的位置
Star.prototype.update = function () {
this.y += this.velocity;
this.draw();
}
// 当鼠标指针移动时创建星星
window.addEventListener("mousemove", (event) => {
const x = event.clientX;
const y = event.clientY;
const radius = Math.random() * 3;
const color = `rgb(${Math.random() * 255}, ${Math.random() * 255},
${Math.random() * 255})`;
const velocity = Math.random() * 3;
const star = new Star(x, y, radius, color, velocity);
stars.push(star);
});
// 动画函数
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新每个星星的位置
for (let i = 0; i < stars.length; i++) {
stars[i].update();
if (stars[i].y > canvas.height) {
stars.splice(i, 1);
}
}
}
// 开始动画
animate();
</script>
</body>
</html>
这段代码的主要目的是使用HTML、CSS和JavaScript创建一种Web特效。其中。当鼠标指针在页面上移动时，会产生随机颜色的小星星，并沿着鼠标指针的移动轨迹不断洒落。
下面详细解释这段代码。
在HTML结构方面，一个<canvas>元素放置在<body>中。这个<canvas>元素用作绘制星星的画布。
在CSS样式方面，body、html和#canvas都设置成黑色背景，并且宽度和高度都设置为100%，以确保它们占据整个页面。
在JavaScript方面，实现的功能如下。
（1）获取画布并设置其大小来填充整个窗口。另外，获取一个2D渲染上下文，这是一个包含很多画图功能的对象。
（2）使用stars数组来存储星星对象。
（3）定义一个Star()构造函数，用于创建具有一定属性的星星对象。这些属性包括x和y坐标、半径、颜色和速度。这个函数还包含两个方法—draw()和update()。draw()方法用于在画布上绘制一个星星，而update()方法用于改变星星的位置。
（4）通过监听mousemove事件，我们在鼠标指针移动时创建新的星星。对于每颗星星，我们随机生成其半径、颜色和速度，并将它的初始位置设置为鼠标指针的当前位置。创建的星星对象被推送到stars数组中。
（5）这段代码中有一个名为animate()的函数，它使用requestAnimationFrame()函数来创建一个动画循环。在这个循环中，我们首先清除整个画布，然后遍历stars数组并对每个星星调用update()方法，这会促使星星向下移动。如果星星超出画布的底部，我们就将其从数组中删除。
（6）调用animate()函数以启动动画循环。
总体来说，这段代码创建了一个动态的星星效果，其中当用户在页面上移动鼠标指针时，会生成随机颜色的星星，并沿着鼠标指针的轨迹移动并下落。这是通过使用HTML的<canvas>元素，并用JavaScript来动态绘制和更新星星实现的。
