如何在Skulpt (流星中)实现海龟？

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>

修订：--我在函数下添加了该代码：

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>中。