テキストエリアからコードを取得してキャンバス内で処理コードを実行

テキストボックスから処理コードを取得してキャンバス上で実行しようとしていますが、何が起こっているのかわからないのですか？私はそれを言うデバッグ時に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>

出典

2016-05-04 Mimi Chan

あなたはエラーがあるかどうかを確認するために、コンソールを見てきました？ dev-toolsとコンソールでf12を打つと – Blindman67

私はそれを試しましたが、私には例外があります。タイプエラーです。ctx.compile（）は関数ではありません。 var com = compile（）;のようなことをするためにitryed; ctx.com;コードはエラーなく実行されますが、キャンバスは画面に表示されず、コンソールにはcomが定義されていないと表示されます。 –

エラー;あなたは、2Dキャンバスのコンテキストに存在しない関数を呼び出ししようとしているので、「ctx.compile（）関数ではありませんが、」期待されています。私が正しく理解していれば、独自の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)); 
}

出典

2016-05-09 12:28:04 1cgonza

アップス私は間違ったコードを共有申し訳ありません、私はその問題を早期に修正しましたが、そのエラー** iframediv.bodyはnullです**私は実行ボタンを押したときにコードを実行しようとするとまだapearです。ドキュメントyhet上に作成されていない要素には何も置くことはできないが、ドキュメント上になければiframeedivの値は定義されていないだろうか？私がコードをデバッグするのを開始すると、どのようにしてコードを実行する必要がありますか...私は何が起こっているのか分かりません。 PS私の悪い説明を申し訳ありませんが、私はプログラミングでは新しいです。 –

忘れてしまいました。間違いを見つけました。私が書いたHTMLページの私の例では、1行のコードを消去しなければなりませんでした。手伝ってくれてありがとう。 –

これが答えであれば、あなたはそれを受け入れることができます;） - そうでない場合は、自分の解決策を他の人にも教えてもらってください。あなたの学習プロセスのベスト！ – 1cgonza

テキストエリアからコードを取得してキャンバス内で処理コードを実行

答えて

関連する問題