Visual代码中的p5.js : sketch.js未“执行”
如果这个问题类似于几个类似的问题，请耐心等待，但我似乎不适应我的问题的答案，例如Accessing Files with p5.js in Visual Studio Code。
下面的sketch.js示例在https://editor.p5js.org/中工作
function setup() {
createCanvas(700, 700);
noFill();
console.log("Hello World!");
}
function draw() {
ellipse(mouseX, mouseY, 40, 80);
}我想使用代码继续使用p5.js。
下面的index.html是由示例代码的指导人员提供的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../libraries/p5/p5.min.js" type="text/javascript"></script>
<script src="../../libraries/generative-design-library/generative-design-library.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<link href="../../styles/main.css" rel="stylesheet" type="text/css">
<!-- help tooltip start -->
<script src="../../libraries/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="../../libraries/tooltipster/tooltipster.bundle.js"></script>
<link rel="stylesheet" type="text/css" href="../../libraries/tooltipster/tooltipster.bundle.css" />
<link rel="stylesheet" type="text/css" href="../../libraries/tooltipster/tooltipster-sideTip-noir.min.css" />
<script src="../../libraries/help-tooltip.js" type="text/javascript"></script>
<!-- help tooltip end -->
</head>
<body>
<span id="help" data-tooltip-content="#help-content">?</span>
</body>
</html>相对于文件夹结构(从https://github.com/generative-design/Code-Package-p5.js/releases/tag/v1.3.2下载)而言，相对路径很好：
Code-Package-p5.js-1.3.2
libraries
01_P
P_1_0_01
index.html
sketch.js我尝试了扩展p5服务器和p5.vscode，它们导致了相同的行为:只是显示了问号，而不是在sketch.js中创建的画布。似乎根本找不到sketch.js。原因是什么？在VS代码中使用p5.js需要做什么？
回答 1
Stack Overflow用户
发布于 2022-06-11 15:02:18
您是否将sketch.js与html文件放在同一个文件夹中？
- main
- libraries
- p5 and stuff
- page0
- maybe assets
- code
- index.html
- sketch.js ???您也可以替换
<script src="sketch.js" type="text/javascript"></script>通过以下方式：
<script>
function setup() {
createCanvas(700, 700);
noFill();
console.log("Hello World!");
}
function draw() {
ellipse(mouseX, mouseY, 40, 80);
}
</script>而且你也可以把sketch.js放在<body>里，我不认为这真的有帮助，但它可能，不知道。
要让p5.js在本地计算机上工作：
您应该有1，(2,3)+文件：
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>您还可以将p5.js库存储在您自己的计算机上，它只是一个JavaScript文件，但是我从editor.p5js.org__复制了这个文件。
sketch.js：
function setup(){
// use p5.js stuff here
}
// use everything else here it's all a starting point!style.css：
body {
background-color: #111;
}
button {
width: 100vw;
height: 2px;
}这是完全可选的，就像.js文件一样，您可以使用<style> </style>。
将所有这些文件(当前)放在一个文件夹中之后。只需打开index.html文件即可。
https://stackoverflow.com/questions/72584508
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号