JavaScript星空动画无法在网页显示问题求助

问题概述 #

已确认JS文件与HTML正常连接，canvas元素存在，但星空动画始终无法显示。

问题根源及修复步骤 #

1. 缺少p5.js依赖库 #

你的JS代码大量使用了createCanvas、createVector、random、map等p5.js专属API，但页面中并未引入p5.js库，原生JS无法识别这些函数，导致动画逻辑完全无法执行。

修复：
在HTML的<head>标签中添加p5.js的CDN引入：

<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>

2. HTML中script标签位置错误 #

你将<script>放在了<canvas>标签内部，不符合HTML规范，会导致脚本无法正确加载执行。

修复：
将script标签移出canvas标签，放在<body>末尾（</body>前），修改后的结构：

<canvas class="canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>
<script src="space.js"></script>

3. JS中重复创建canvas导致冲突 #

你的JS开头手动创建了一个新canvas，但p5.js的createCanvas会自动创建或关联页面中的canvas元素，两者冲突导致动画绘制到了未添加到DOM的canvas上。

修复：
移除JS开头的以下代码：

var canvas = document.createElement('canvas');
var c = canvas.getContext('2d');

同时修改setup函数，让p5.js关联页面中已有的canvas：

function setup() {
  let canvasElement = document.querySelector('.canvas');
  createCanvas(window.innerWidth, window.innerHeight).parent(canvasElement);
  stroke(255);
  strokeWeight(2);

  for (let i = 0; i < numStars; i++) {
    stars.push(new Star(random(width), random(height)));
  }
}

4. canvas被页面内容覆盖 #

当前canvas的CSS未设置层级，会被后续的导航栏、文字内容覆盖，即使动画运行也看不到。

修复：
修改canvas的CSS，添加z-index: -1将其置于页面内容下方：

.canvas {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  z-index: -1;
}

5. 窗口大小适配（可选优化） #

添加窗口大小变化监听，让canvas自适应窗口：

function windowResized() {
  resizeCanvas(window.innerWidth, window.innerHeight);
}

核心修改后的代码片段 #

调整后的HTML头部 #

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mustafa Said</title>
  <link rel="stylesheet" href="./style.css" />
  <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>
</head>

调整后的JS代码开头 #

const numStars = 500;
let stars = [];

function setup() {
  let canvasElement = document.querySelector('.canvas');
  createCanvas(window.innerWidth, window.innerHeight).parent(canvasElement);
  stroke(255);
  strokeWeight(2);

  for (let i = 0; i < numStars; i++) {
    stars.push(new Star(random(width), random(height)));
  }
}

function windowResized() {
  resizeCanvas(window.innerWidth, window.innerHeight);
}

// ... 剩余代码保持不变

内容的提问来源于stack exchange，提问作者moosee