用JavaScript编程，让你的网站绚丽多彩

前端

2023-12-18 05:52:45

一、前言

在浏览图片网站时，经常能看到令人惊叹的星空图。这些图片往往给人一种宁静祥和的感觉，让人沉醉其中。其实，利用 JavaScript、HTML 和 CSS 样式，你也可以轻松创建出这样的星空图。

二、项目准备

在开始制作之前，你需要准备以下工具：

一个文本编辑器（如记事本、Sublime Text、Visual Studio Code等）
一个浏览器（如谷歌浏览器、火狐浏览器、Safari浏览器等）
一个 JavaScript 库（如jQuery）
一个 CSS 库（如Bootstrap）

三、实际编码

1. 创建 HTML 文件

首先，你需要创建一个 HTML 文件，并保存为 "starry-night.html"。在该文件中，输入以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

2. 创建 CSS 文件

接下来，你需要创建一个 CSS 文件，并保存为 "style.css"。在该文件中，输入以下代码：

body {
  background-color: black;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

3. 创建 JavaScript 文件

最后，你需要创建一个 JavaScript 文件，并保存为 "script.js"。在该文件中，输入以下代码：

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

// 设置画布尺寸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 创建星星数组
var stars = [];

// 设置星星数量
var numStars = 100;

// 创建星星对象
for (var i = 0; i < numStars; i++) {
  var star = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 3 + 1,
    color: "white"
  };

  stars.push(star);
}

// 绘制星星
function drawStars() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < stars.length; i++) {
    var star = stars[i];

    ctx.beginPath();
    ctx.arc(star.x, star.y, star.radius, 0, 2 * Math.PI);
    ctx.fillStyle = star.color;
    ctx.fill();
  }
}

// 更新星星位置
function updateStars() {
  for (var i = 0; i < stars.length; i++) {
    var star = stars[i];

    star.x += Math.random() * 2 - 1;
    star.y += Math.random() * 2 - 1;

    // 如果星星移出画布，则将其移回画布内
    if (star.x < 0) {
      star.x = canvas.width;
    } else if (star.x > canvas.width) {
      star.x = 0;
    }

    if (star.y < 0) {
      star.y = canvas.height;
    } else if (star.y > canvas.height) {
      star.y = 0;
    }
  }
}

// 每秒绘制和更新星星
setInterval(function() {
  drawStars();
  updateStars();
}, 1000 / 60);