单击 processing.js 后加载 .pde 文件

Question

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

也许我遗漏了什么或者没有把代码放在正确的地方？

这是 link 到 fiddle：https://jsfiddle.net/truxx/khht29zx/1/

/虽然它有一个问题，这段代码在我的 chrome 浏览器中创建了一个灰色的 canvas，但同样的代码在 fiddle 上没有这样做。 /

Answer 1

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

综上所述，here 是一个 link 的 JSFiddle，它加载了 Processing.js 库，包含您需要使用的设置，以及我的代码我想建议你试试：

var mycanvas = document.createElement("canvas");
mycanvas.id = "mycanvas";
document.body.appendChild(mycanvas);
Processing.loadSketchFromSources(mycanvas, 'PATH/TO/YOUR/SKETCH.pde');

请注意 我刚刚 link 编辑的 JSFiddle 仍然包含错误，因为您不能只从任何随机文件加载 .pde 文件URL 那样。它必须在同一个域中，否则您必须修改您的 CORS 设置。

如果您有后续问题，请 post 在一个新问题 post 中提出，并确保将您的问题缩小到 MCVE 可以实际证明您的问题。祝你好运。

单击 processing.js 后加载 .pde 文件

loading a .pde file after the click with processing.js

javascript

canvas

processing.js