2D渲染处理P5
我是javascript的新手，偶然发现了这个网页：
http://processingjs.org/articles/RenderingModes.html
它描述了如何在处理过程中渲染2D对象。如果我打开一个新的P5项目并插入示例代码，代码如下所示：
HTML (index.html)：
<html>
<head>
<meta charset="UTF-8">
<!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch_180226b.js"></script>
<!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
<!-- This line removes any default padding and style.
You might only need one of these values set. -->
<style> body {padding: 0; margin: 0;} </style>
</head>
<body>
</body>
</html>JS (sketch_180226b.js)：
int i = 0;
void setup() {
size(200, 200);
background(255);
smooth();
strokeWeight(15);
frameRate(24);
}
void draw() {
stroke(random(50), random(255), random(255), 100);
line(i, 0, random(0, width), height);
if (i < width) {
i++;
} else {
i = 0;
}
}但是，如果我运行代码，Chrome会打开，它不会显示任何内容。我必须在HTML代码中创建一个额外的画布吗？
回答 1
Stack Overflow用户
发布于 2018-02-26 23:35:21
Processing和p5是不同的。p5为JavaScript，处理在运行时转换为JavaScript。在这里可以找到一个有用的比较：https://www.sitepoint.com/processing-js-vs-p5-js-whats-difference/
您找到的示例是用于处理的，而不是p5，因此将不会运行，因为它不是有效的JavaScript -它将在第1行失败，并显示"int“。
如果您打算使用p5，那么等效(且非常相似)的示例将是：
let i = 0;
function setup() {
createCanvas(200, 200); //replaced size(200,200)
background(255);
smooth();
strokeWeight(15);
frameRate(24);
}
function draw() {
stroke(random(50), random(255), random(255), 100);
line(i, 0, random(0, width), height);
if (i < width) {
i++;
} else {
i = 0;
}
}否则，如果您希望在浏览器中运行处理代码，则需要使用此处描述的过程：http://processingjs.org/articles/p5QuickStart.html
https://stackoverflow.com/questions/48989485
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号