可汗学院的计算机程序如何在线下或在我自己的网站上运行？

本文介绍了可汗学院的计算机程序如何在线下或在我自己的网站上运行？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经开发了中的程序，我想在可汗学院之外运行。怎么办呢？

I have developed programs in Khan Academy's Computer Programming lessons that I would like to run outside of Khan Academy. How can that be done?

推荐答案

可汗学院使用，一个用于与< canvas> 元素进行交互的JavaScript库。尽管Processing本身就是一种语言，但Khan Academy使用。

Khan Academy uses Processing.js, a JavaScript library for interacting with <canvas> elements. Although Processing is actually a language in its own right, Khan Academy uses JavaScript-only Processing.js code.

所以你需要设置一个导入Processing.js的网页，设置一个< canvas> ，并在画布上构建一个Processing.js实例。最后，您需要确保您的Khan Academy代码在范围内具有Processing.js实例的所有成员（我使用执行此操作），以及一些等效的，例如 mouseIsPressed 和 getImage 。

So you need to set up a web page that imports Processing.js, sets up a <canvas>, and builds a Processing.js instance on the canvas. Finally you need to make sure your Khan Academy code has all the members of the Processing.js instance in scope (I do this with with), plus some equivalent of Khan Academy's small modifications to Processing.js, like mouseIsPressed and getImage.

这是一些为我工作的样板。可能需要进一步开发才能让它适用于更复杂的例子;如果您找到不起作用的示例，请发表评论。

Here is some boilerplate that has been working for me. Probably further development will be required to get it working for more complicated examples; please post comments when you find examples that don't work.

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript</title>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    var canvas = document.getElementById("canvas");
    var processing = new Processing(canvas, function(processing) {
        processing.size(400, 400);
        processing.background(0xFFF);

        var mouseIsPressed = false;
        processing.mousePressed = function () { mouseIsPressed = true; };
        processing.mouseReleased = function () { mouseIsPressed = false; };

        var keyIsPressed = false;
        processing.keyPressed = function () { keyIsPressed = true; };
        processing.keyReleased = function () { keyIsPressed = false; };

        function getImage(s) {
            var url = "https://www.kasandbox.org/programming-images/" + s + ".png";
            processing.externals.sketch.imageCache.add(url);
            return processing.loadImage(url);
        }

        // use degrees rather than radians in rotate function
        var rotateFn = processing.rotate;
        processing.rotate = function (angle) {
            rotateFn(processing.radians(angle));
        };

        with (processing) {


            // INSERT YOUR KHAN ACADEMY PROGRAM HERE


        }
        if (typeof draw !== 'undefined') processing.draw = draw;
    });
  </script>
</body>
</html>

这篇关于可汗学院的计算机程序如何在线下或在我自己的网站上运行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！