使用 processing.js 点击后加载 .pde 文件答案

【问题标题】：loading a .pde file after the click with processing.js使用 processing.js 点击后加载 .pde 文件
【发布时间】：2017-07-12 09:50:52
【问题描述】：

几天前我发现了 processing.js，我为此苦苦挣扎。我试图在按下按钮的那一刻出现画布。例如，这段代码有效，它在点击后创建了一个画布：

        <!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"
}

但它会抛出一个错误，提示：invalid left-hand sign in asigment。

然后我尝试了类似的方法：

<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>

但这只是创建了一个白色画布，它忽略了处理脚本。我也不是很擅长 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 is not a function at 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>

也许我错过了什么或没有将代码放在正确的位置？

这是小提琴的链接：https://jsfiddle.net/truxx/khht29zx/1/

/虽然它有一个问题，这段代码在我的 chrome 浏览器中创建了一个灰色画布，但是相同的代码在小提琴上没有这样做。 /

【问题讨论】：

尝试调用 Processing.loadSketchFromSources(canvas, sources);，正如 Processing.js 的创建者在 this answer 中所讨论的那样。
它不起作用，也许我做错了..我只是用我的尝试编辑了我的问题
首先canvas 变量必须是一个元素，而不是字符串。其次，您是否打印出sources 变量以确保它符合您的期望？请尝试发布一个我们可以实际运行的minimal reproducible example，或者最好是一个指向运行您的代码的 CodePen 或 JSFiddle 的链接。
相信canvas是一个元素，应该是这样写的吧？ : var canvas = /var/www/html/processing/JS2.pde 当我这样做时，我收到一条错误消息，提示“无效的正则表达式标志”
我不确定如果打印，你的意思是我只需要包含console.log(sources);

标签： javascript canvas processing.js

【解决方案1】：

感谢您尝试发布 JSFiddle，但以后请尝试确保您发布的代码生成与您看到的完全相同的错误。您发布的 JSFiddle 包含几个错误：您的字符串没有用引号括起来，您没有加载 Processing.js 库，并且您在 JSFiddle 设置方面遇到了一些其他问题。请在发布之前尝试将它们理顺。您需要真正确保代码运行并向我们展示您所看到的相同内容。

话虽如此，here 是一个指向加载了 Processing.js 库的 JSFiddle 的链接，包含您需要使用的设置，以及我试图建议您尝试的代码：

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。祝你好运。

【讨论】：

非常感谢您的回答。它澄清了很多点，例如我不知道我可以在 jSFiddle 中加载库，而无需在 html 中加载代码。但是，我在我的本地主机中尝试了代码 Processing.loadSketchFromSources(mycanvas, '/var/www/html/processing/mousePressed.pde'); ` 和 ` Processing.loadSketchFromSources(mycanvas, /processing/mousePressed.pde'); 它只是创建了一个灰色画布，并不加载文件。代码在 index.html 中，我可以通过其他方式加载 .pde 脚本，但不能使用函数，例如这种情况
@Trux 您检查过the JavaScript console 是否有任何错误？
它说： "GET localhost/e 404 (Not Found)" 和 "Uncaught Processing.js: Uncaught Processing.js: Unable to load pjs sketch files: v ==> Invalid XHR status 404 a ==> Invalid XHR 状态 404"，以及许多无效的 XHR 状态 404 错误
@Trux 是的，这是一个单独的错误。这就是我在回答的请注意部分提到的。那是因为您试图从另一个域加载任意 URL，这是不允许的。您必须修改 CORS 设置。尝试使用谷歌搜索您收到的错误以获取更多信息。然后，如果您遇到困难，请发布一个新问题。祝你好运。