Question

我正在尝试从文本框中获取处理代码并使其在画布中运行，但我不知道发生了什么事可以有人帮助我吗？当我调试它时，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

错误＆＃34; ctx.compile（）;不是一个功能＆＃34;因为你试图调用在2d画布上下文中不存在的函数，所以是预期的。如果我理解正确，您正在尝试运行自己的compile函数并在刚刚创建的画布上呈现它。

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

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中运行处理代码

1 个答案: