简单的图形绘制软件

Question

我正在寻找一个简单的应用程序来绘制像这张是汗学院的这样的形状：

我希望能够使用一种简单的语言(最好是javascript)来绘制形状和测试算法。我的首选是windows桌面应用程序，但网络应用程序也是可以的。我也希望能够和其他人分享代码/绘图。

我将主要使用二维空间几何的应用程序。

Answer 1

您可以提到Khan academy，它似乎是一个很好的资源，可以使用processing.js库的包装器提供示例。为了能够快速地使用这个库绘制示例和内容，我建议使用jsFiddle，它既允许绘制和测试算法，也允许与其他人共享代码和/或绘图。

下面两个主要部分显示jsFiddle的基本设置，以便与processing.js一起使用，另一个部分包含一些您可能认为有用的不同资源。

基本

processing.js小提琴

的建立

在下面的四个小节中，我提供了一个这个基本的例子的设置，它提供了访问来自Khan Academy的命令的jsfiddle，您可以将这些命令分给其他示例。

首先，根据您的喜好更改绘制函数，然后单击工具栏中的run按钮来查看您的更改。

框架与扩展

选择"Processing.js 1.0.0“或其他合适的版本，并在下一个下拉菜单中选择"No wrap in ”

Html (左上角框)

<canvas width="400px" height="400px"></canvas>

Css (右上框)

请注意在开始时使用</style>结束style部分的技巧，并在end处反向使用一个小脚本片段来使javascript框整洁。

</style> 
<script type="text/javascript">
    window.addEventListener('load',function() {
    var scripts = document.body.getElementsByTagName('script');
    var canvases = document.body.getElementsByTagName('canvas');
    new Processing(canvases[0],scripts[0].text);
}, false);
// Here prevent javascript in body from throwing error
</script>
<style>

Javascript (左下角)

 // Setup the Processing Canvas
 void setup(){
   size( 400, 400 );
 }

 // Main draw loop
 void draw(){

  rect(10, 20, 100, 150);
  rect(90, 140, 30, 30);
  ellipse(130, 130, 100, 200);
  ellipse(130, 130, 110, 110);
  line(0, 200, 100, 0);

 }

一些其他资源

在为您的问题寻找替代方案时，我发现了一些资源，我将推荐您继续阅读：

• 在您的计算机上运行汗学院程序 - Quote:我注意到很多人问他们如何运行他们在可汗学院计算机科学领域看到或创建的程序，所以我写了这篇文章来解释如何(某种程度上)实现这个目标。请注意，并非所有Khan Academy程序都将在您的计算机上运行。
• jsFiddle文档 -正在进行中的工作，但确实有一个教程，一个常见问题和一些使用示例
• 使用jsFiddle的processing.js时钟 -使用processing.js显示动画
• StackOverflow问题：JavaScript:显示诸如rect()、rect()、省略()等图形 --它链接和描述了一些与可汗学院的工作方式有关的内容，并提供了一些关于独立程序的信息，以及一些下载说明等等。
• 快速启动- JavaScript开发者版 --描述了processing.js的一些历史，但很快就变成了关于如何在不同的上下文中使用processing.js的有用信息。这似乎也是关于processing.js的权威文档。