Question

我几天前找到了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"
}

但它会抛出一个错误：无效的左手签到。

然后我尝试了类似的事情：

<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不是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浏览器中创建一个灰色画布，但相同的代码并没有在小提琴上做这个。 /

Answer 1

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

所有这一切，here是一个JSFiddle的链接，它加载了Processing.js库，包含你需要使用的设置，以及我试图建议你尝试的代码：

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

请注意我刚刚链接的JSFiddle仍然包含错误，因为您无法从任何随机网址加载.pde文件。它必须位于同一个域中，或者您必须修改CORS设置。

如果您有后续问题，请将其发布在新的问题帖子中，并确保将问题范围缩小到实际证明您问题的MCVE。祝你好运。

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

1 个答案: