运行通过从 textarea 获取代码来处理 canvas 中的代码

Question

我正在尝试从文本框中获取处理代码并将其设为运行 canvas，但我不知道发生了什么，有人可以帮助我吗？当我调试时它说 ctx.compile();不是一个功能我怎样才能让它正常工作？这是我使用的代码。

<!DOCTYPE Html>

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles/style2.css" >
    <script src="processing-1.4.1.js"></script>
<script type="text/javascript">

function submitTryit() {
        var text = document.getElementById("textareaCode").value;
        var ifr = document.createElement("iframe");
        ifr.setAttribute("frameborder", "0");
        ifr.setAttribute("id", "iframeResult");
        document.getElementById("iframewrapper").innerHTML = "";
        document.getElementById("iframewrapper").appendChild(ifr);    
        var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
        ifrw.document.open();
        ifrw.document.write(text);  
        ifrw.document.close();
        canvas();     

        if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
        ifrw.document.body.contentEditable = true;
        ifrw.document.body.contentEditable = false;

        }

    function canvas() {
        var ifrr = document.getElementById('iframeResult');
        var iframediv = (ifrr.contentWindow.document) ? ifrr.contentWindow.document : (ifrr.contentDocument.document) ? ifrr.contentDocument.document : ifrr.contentDocument;
        var canv = document.createElement('CANVAS');
        canv.setAttribute('id', 'mycanvas');
        var ctx = canv.getContext("2d");
        ctx.compile();
        iframediv.body.appendChild(canv);
    } 
}
function compile(){
    var processingCode = document.getElementById('textCode').value;
    var jsCode = Processing.compile(processingCode).sourceCode;
}



</script> 
</head>
<body>
<div class="container">
<!--Iframe-->
 <div class="iframecontainer">

    <div id="iframewrapper" class="iframewrapper">
    </div>

 </div>

<!--PJS text field-->
 <div class="PJStextwraper">
  <div class="overPJStext">
  </div>

    <textarea id="textCode" spellcheck="false" autocomplete="off" wrap="logical">   int x,y,w;
float vx,vy;

void setup() {
  size(300,200);
  x = int(random(width));
  y = int(random(height));
  vx = random(5);
  vy = random(5);
  w = int(10+random(10));
}

void draw() {
  background(140,70,60);
  ellipse(x,y,w,w);
  x += vx;
  y += vy;
  //
  if(x > width || x < 0) {
    vx *= -1;
  }
  if(y > height || y < 0) {
    vy *= -1;
  }
}

    </textarea>
 </div>

<button class="BT" type="button" onclick="submitTryit()">Run &raquo;</button>

</div> <!-- End container-->

</body>
</html>

Answer 1

错误 "ctx.compile(); is not a function" 是预料之中的，因为您正在尝试调用 2d canvas 上下文中不存在的函数。如果我理解正确，您正在尝试运行您自己的 compile 函数并将其呈现在您刚刚创建的 canvas 上。

为此，您需要更改一些内容，尝试以下操作并查看是否有效：

function canvas() {
    var ifrr = document.getElementById('iframeResult');
    var iframediv = (ifrr.contentWindow.document) ? ifrr.contentWindow.document : (ifrr.contentDocument.document) ? ifrr.contentDocument.document : ifrr.contentDocument;
    var canv = document.createElement('canvas');
    canv.setAttribute('id', 'mycanvas');
    // The ctx will be created in an instance of Processing.
    // So no need for the following line.
    // var ctx = canv.getContext("2d");
    compile(canv);
    iframediv.body.appendChild(canv);
}

// Here you can pass the canvas where you want to render the code.
function compile(canv) {
    var processingCode = document.getElementById('textCode').value;
    var jsCode = Processing.compile(processingCode).sourceCode;
    // Now that you have the code in JS, you can create an instance of Processing.
    // But, what you get from the compiler is a string,
    // so you need to convert the string to JS.
    // For instance, I use here eval(jsCode) 
    var processingInstance = new Processing(canv, eval(jsCode));
}

运行通过从 textarea 获取代码来处理 canvas 中的代码

Running processing code in canvas by getting the code from textarea

javascript

canvas

processing.js

运行 通过从 textarea 获取代码来处理 canvas 中的代码

Running processing code in canvas by getting the code from textarea

javascript

canvas

processing.js

运行通过从 textarea 获取代码来处理 canvas 中的代码