几天前我发现了processing.js，我在它上面遇到了很多困难。我试图在按下按钮时显示 Canvas 。例如，此代码有效，它在单击后创建一个 Canvas :
<!DOCTYPE HTML>
<html>
<script src="/js/processing.js"></script>
<head>
</head>
<body>
<input type="button" value="Cambiar imagen" id="clearbutton"
onclick="canvas();">
<script>
function canvas(){
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas); }
</script>
</body>
</html>
然后我尝试更改代码，如下所示:
function canvas(){
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
mycanvas.data-processing-sources = "/var/www/html/processing/jS2.pde"
}
但它会抛出一个错误:分配的左手符号无效。
然后我尝试了类似的方法:
<script type="text/processing" data-processing-target="mycanvas">
void setup()
{
size(300,300);
background(0);
fill(255);
noLoop();
PFont fontA = loadFont("courier");
textFont(fontA, 14);
}
void draw(){
text("Hello!",20,20);
}
</script>
但这只是创建了一个白色 Canvas ，并且忽略了处理脚本。 我也不太擅长 javascript，所以如果你回答的话，谢谢。我已经检查了processing.js 的引用文件，但很难理解它。
按照评论中的建议，我尝试了:
<input type="button" value="Cambiar imagen" id="clearbutton" onclick="canvas();">
<script>
function canvas(){
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
var canvas = "/var/www/html/processing/jS2.pde"
var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
Processing.loadSketchFromSources(canvas, sources);
}
</script>
这会给出一个错误:canvas.getAttribute 不是 Canvas 上的函数。
并尝试过:
<body>
<input type="button" value="Cambiar imagen" id="clearbutton" onclick="loadSketchOnContentSwap();">
<script>
function loadSketchOnContentSwap() {
var canvas = "/var/www/html/processing/jS2.pde"
var sources = canvas.getAttribute("data-processing-sources").split(/\s+/);
Processing.loadSketchFromSources(canvas, sources);
}
</script>
</body>
也许我错过了一些东西或者没有将代码放在正确的位置？
这是 fiddle 的链接:https://jsfiddle.net/truxx/khht29zx/1/
/不过它有一个问题，这段代码在我的 chrome 浏览器中创建了一个灰色 Canvas ，但相同的代码在 fiddle 上却没有这样做。/
最佳答案
感谢您尝试发布 JSFiddle，但将来请尝试确保您发布的代码生成与您所看到的完全相同的错误。您发布的 JSFiddle 包含几个错误:您的字符串未用引号引起来，您尚未加载Processing.js 库，并且 JSFiddle 设置存在一些其他问题。请在发帖前尝试将它们理顺。您需要实际确保代码运行并向我们显示您所看到的相同内容。
综上所述，here是一个指向 JSFiddle 的链接，该 JSFiddle 已加载 Processing.js 库，包含您需要使用的设置以及我建议您尝试的代码:
var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
Processing.loadSketchFromSources(mycanvas, 'PATH/TO/YOUR/SKETCH.pde');
请注意，我刚刚链接的 JSFiddle 仍然包含错误，因为您不能从任何类似的随机 URL 加载 .pde 文件。它必须位于同一域中，否则您必须修改 CORS 设置。
如果您有后续问题，请将其发布在新的问题帖子中，并确保将问题范围缩小到 MCVE这实际上说明了你的问题。祝你好运。
关于javascript - 使用processing.js 单击后加载 .pde 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45023975/