0

我想知道我将如何制作类似于 Khanacademy 的东西。

如果您查看下面的链接，他们基本上有一个文本框，您可以在其中输入文本，然后根据您输入的“关键字”将突出显示它们，例如，如果您键入 function，它将返回蓝色的单词 function。但是，如果您执行 rect() 之类的操作，它会在屏幕旁边绘制一个矩形。我想做这样的事情，但使用 HTML，所以根据你是否输入某些关键字，它会使其成为某种颜色，然后它将你的代码作为实际 HTML 输出到它旁边的屏幕中。我猜你可以为输出做一个 iFrame 之类的东西，但不确定其余的。

链接：https ://www.khanacademy.org/cs/programming/drawing-basics/p/intro-to-drawing

我在网上查了一些东西，但找不到类似的东西。

您可能会想到的另一件事是 codecademy.com 上的代码编辑器。

如果您需要更多信息，请告诉我！

这是我最后的手段，我一直在寻找2个月D：

4

1 回答 1

0

您可以使用的一个很好的语法荧光笔是 CodeMirror ( http://codemirror.net/ )。它很容易实现并从中获取文本、更改颜色等。

我了解您还希望能够在文本框中进行编程。在不创建自己的代码解析器的情况下也允许这样做的一种简单方法是在文本框中使用 javascript 代码。eval()然后，您可以在文本框中的文本上使用 javascript 的函数来执行此 javascript。

你唯一需要做的就是rect()在你的 html 页面中编写你自己的函数，比如 javascript 函数。对于类似和其他的绘图功能rect()，您已经可以使用 HTML5 画布对象 ( http://www.w3schools.com/tags/ref_canvas.asp )。然后，您可以按照您的建议在 iframe 中绘制此画布，或者只是在另一个 div 中绘制。

我希望这会给你一些启发或让你开始。

编辑：我提供了一个小例子：（您的浏览器必须支持 HTML5 才能工作）

<html>

<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>

<style>
  .CodeMirror { height: auto; width: 500px; border: 1px solid #ddd; }
  .CodeMirror-scroll { max-height: 200px; }
  .CodeMirror pre { padding-left: 7px; line-height: 1.25; }
  #drawing { position:absolute; left:550px; top:10px; border: 1px solid #ddd; width:500px; height: 400px; }
</style>

<textarea id=code>
// Drawing test
Rect(20,20,100,100);
</textarea>

<div id="drawing">
    <canvas id="canvas" width="500" height="400"></canvas>
</div>

<br><input type="button" onclick="eval(editor.getValue())" value="Run" />

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      mode: "text/javascript",
      matchBrackets: true
    });
</script>

<script>
<!-- Your functions go here -->
function Rect(x,y,width,height)
{
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.rect(x,y,width,height);
    ctx.stroke(); 
}
</script>

</html>
于 2013-11-02T18:56:29.807 回答