スケートでタートルを実装する方法（流星で）？

Question

私のコードは、Skulpt.orgで提供されているものとほとんど同じですが、私はキャンバスにカメを表示することはできません。私は、タートルのライブラリがロードされていることと、pythonが正常に実行されていることを確認するコードを追加しました。両方のメッセージは、これが当てはまると言います。すべてがうまくいくように働いているようです。

ここに私のテンプレートコードの一部です：

Template.pythonEnv.events({ 
'click #py_run': function(event, template) { 
    // get content from Ace 
    Tracker.autorun(function (e) { 
     var editorPy = AceEditor.instance("py_inPanel", { 
      theme:"dawn", 
      mode:"python" 
     }); 
     if(editorPy.loaded === true){ 
      e.stop(); 
      Session.set("pyContent", editorPy.getValue()); 
     } 
    }); 
    // Skulpt 
    var prog = Session.get("pyContent"); 
    var mypre = document.getElementById("py_outputPanel"); 
    mypre.innerHTML = ''; 

    Sk.onAfterImport = function(library) { 
     switch(library) { 
      case 'turtle': 
       console.log('turtle loaded'); // *** CHECK TO SEE IF TURTLE LOADED *** 
       break; 
     } 
    } 

    Sk.pre = "py_outputPanel"; // output 
    Sk.configure({ 
     inputfun: function(prompt) { 
      return window.prompt(prompt); // for raw_input() 
     }, 
     inputfunTakesPrompt: true, 
     output: outf, 
     read: builtinRead 
    }); 
    (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'py_turtlePanel'; 
    var myPromise = Sk.misceval.asyncToPromise(function() { 
     return Sk.importMainWithBody("<stdin>", false, prog, true); 
    }); 
    myPromise.then(function(mod) { 
     console.log('Python - success'); // *** CHECK TO SEE IF PYTHON RAN *** 
    }, function(err) { 
     console.log(err.toString()); 
    }); 
    // resize output panel 
    template.$(".py_panel").height($(window).height() - template.$("#py_header").height() - 90); 
}, 
... 

そして、ここに私のhtmlコードだ：

<template name="pythonEnv"> 
{{#with file}} 
    <div id="py_container"> 
     <div id="py_header"> 
      <div id="py_buttonContainer"> 
       <p id="py_toggle_note">Click to toggle: &nbsp; </p> 
       <div class="py_toggleButton py_active" id="py_in">Python</div> 
       <div class="py_toggleButton py_active" id="py_output">Output</div> 
       <div class="py_toggleButton" id="py_turtle">Turtle</div> 
      </div> 
      <button class="login" id="py_run">Run!</button> 
     </div> 
     <div id="py_bodyContainer"> 
      <pre id="py_inPanel" class="py_input py_panel"></pre> 
      <pre id="py_outputPanel" class="py_panel"></pre> 
      <canvas id="py_turtlePanel" class="py_panel py_hidden"></canvas> 
     </div> 
    </div> 
{{/with}} 
</template> 

は改正： 私は私の'click #py_run'機能の下にこのコードを追加：

var canvas = document.getElementById("py_turtlePanel"); 
var context = canvas.getContext("2d"); 
context.fillStyle = "blue"; 
context.font = "bold 16px Arial"; 
context.fillText("Zibri", (canvas.width/2) - 17, (canvas.height/2) + 8); 

それ作品！しかし、私のカメはまだロードされません。私は次のカメのコードを実行しようとしました：

import turtle 

t = turtle.Turtle() 

for c in ['red', 'green', 'yellow', 'blue']: 
    t.color(c) 
    t.forward(75) 
    t.left(90) 

運がありません。また、私のSkulpt-Pythonの機能を備えたものもすべて正しく動作しているようです。

ありがとうございます！

Answer 1

したがって、問題は、私がhttp://www.skulpt.org/#に記載されている初期コードを間違って読んでいることです。私の亀のコードを<canvas id="mycanvas"></canvas>に入れるのではなく、代わりに<div id="mycanvas"></div>に入れてください。