gpt4 book ai didi

javascript - 使用processing.js 单击后加载 .pde 文件

转载 作者:太空宇宙 更新时间:2023-11-04 15:28:26 24 4
gpt4 key购买 nike

几天前我发现了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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com