用 Canvas 构建浩瀚星河

点亮夜空：用 Canvas 绘制璀璨的星河

序言：
在浩瀚的宇宙中，繁星点点的壮美景象令人叹为观止。而现在，借助 HTML5 中强大的 Canvas 元素，我们也能在自己的计算机屏幕上重现这一奇观，让小圆点化作漫天星辰，点亮夜空。

铺设星光画布

Canvas 就像一块神奇的画布，它允许我们在上面绘制和控制图形。要开启我们的星河之旅，首先在 HTML 文档中创建一个 Canvas 元素：

<canvas id="star-canvas"></canvas>

然后，使用 JavaScript 获取这个画布并设置其尺寸，为我们的星系提供广袤的空间：

const canvas = document.getElementById('star-canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

创造漫天飞舞的星星

星星是宇宙中的发光球体。为了模拟星河，我们将绘制无数个小圆点来代表这些星星。

const numStars = 1000;
const stars = [];
for (let i = 0; i < numStars; i++) {
  stars.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 2,
    vx: Math.random() * 0.5 - 0.25,
    vy: Math.random() * 0.5 - 0.25,
  });
}

这段代码创建了 1000 个星星，每个星星都有随机的位置、半径和速度。

让星星动起来

为了让星系更加生动，我们需要让星星随着时间运动。

function updateStars() {
  for (let i = 0; i < numStars; i++) {
    const star = stars[i];
    star.x += star.vx;
    star.y += star.vy;
    if (star.x < 0 || star.x > canvas.width) {
      star.vx = -star.vx;
    }
    if (star.y < 0 || star.y > canvas.height) {
      star.vy = -star.vy;
    }
  }
}

这段代码不断更新每个星星的位置，使其在画布范围内运动。

连接星星

现在，让我们添加一些互动性。当鼠标靠近星星时，就用一条直线将其连接起来。

function drawConnections() {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  ctx.beginPath();
  ctx.lineWidth = 0.5;
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';
  for (let i = 0; i < numStars; i++) {
    const star = stars[i];
    const distance = Math.hypot(mouseX - star.x, mouseY - star.y);
    if (distance < 100) {
      ctx.moveTo(mouseX, mouseY);
      ctx.lineTo(star.x, star.y);
    }
  }
  ctx.stroke();
}

串联代码

最后，我们将所有内容整合到一个函数中，每秒运行一次，不断更新和绘制星系。

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  updateStars();
  drawConnections();
  requestAnimationFrame(render);
}

render();

结语

通过这些代码，我们创建了一个动态的星系模拟，其中小圆点闪烁着光芒，随着鼠标移动而变化。这不仅是一次视觉上的盛宴，更是一次探索计算机图形和交互设计的奇妙旅程。

通过不断调整代码中的参数，如星星数量、运动速度和连线距离，你可以创建属于你自己的独特星河。让想象力翱翔，探索 Canvas 的无限潜力，让你的屏幕化为一片璀璨的星空。

常见问题解答

1. 如何调整星星的数量？
更改 numStars 变量的值即可调整星星的数量。

2. 如何修改星星的速度？
修改 vx 和 vy 的最大值和最小值即可调整星星的速度。

3. 如何改变连线距离？
修改 distance 变量的值即可调整连线距离。

4. 如何添加更多交互性？
可以添加其他交互元素，如点击星星时改变其颜色或大小。

5. 如何在移动设备上运行？
确保代码支持触摸事件，并调整画布大小以适应不同屏幕分辨率。