JS文件未正确关联HTML？Canvas无法显示求助

看起来你的代码没生效主要是几个关键问题导致的，咱们一步步来解决：

1. 缺失p5.js核心库 #

你代码里用的createCanvas()、color()都是p5.js的专属API，但你的HTML里完全没引入p5.js库！浏览器根本不知道这些函数是什么，自然无法生成画布。

2. 脚本加载顺序错误 #

即使引入了p5.js，也要注意加载顺序——依赖p5.js的main.js必须放在p5.js之后加载，否则会出现函数未定义的错误。

3. background赋值语法错误 #

p5.js里设置背景色的正确写法是background(255)，而不是background = color(255)，后者只是给变量赋值，不会实际渲染背景。

4. HTML中缺少目标容器 #

你的setup()函数里把画布挂载到#canvas-wrapper元素上，但你的HTML片段里根本没有这个元素，画布就算生成了也没地方放。

修复后的完整代码示例 #

HTML部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Sketch</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" href="style.css">
    <!-- 先引入p5.js核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <!-- 再引入你的main.js -->
    <script src="main.js"></script>
    <script src="https://use.fontawesome.com/1f87fe0ccc.js"></script>
</head>
<body>
    <!-- 添加画布挂载的容器 -->
    <div id="canvas-wrapper"></div>
</body>
</html>

main.js部分：

function _(selector) { 
    return document.querySelector(selector); 
}

function setup() { 
    const canvas = createCanvas(650, 600); 
    canvas.parent("canvas-wrapper"); 
    // 正确设置白色背景
    background(255); 
}

额外检查点 #

• 确保你的style.css没有意外隐藏#canvas-wrapper或画布元素
• 打开浏览器的开发者工具（F12），切换到Console标签，查看是否有报错信息——这是排查JS问题最直接的方式，比如函数未定义、元素找不到这类错误都会在这里显示

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