可汗学院的Computer Science课

https://www.khanacademy.org/cs/docs

（需FQ。）

原文：

All of the code in the Khan Academy Computer Science platform is written using JavaScript and Processing.js.

Feel free to browse through the documentation here to learn more about these technologies.

Before digging into the documentation here it'd probably be a good idea to watch the tutorial on How to Read Documentation.

译文：

可汗学院里计算机科学课里的所有代码都是用 Javascript 和 Processing.js 写的.

你可以随意浏览这里的文档以获得更多信息。

在细读这里的文档之前建议看看教程“如何阅读文档”

今天这篇东西就是教大家如何在本地运行可汗学院CS课里的代码。。

例如：

1. 准备工作...(当然也就是下载东西啦...)

咱得先去下载Processing.js..

Processing.js的官网：

http://processingjs.org/

Processing.js下载页:

http://processingjs.org/download/

下载development.

既然需要的东西都准备齐了。。。那么...

2.开始动手

(你需要以下3个文件, 最好扔到一个文件夹里。):

processing.js (我们从官网上下载的那个js文件...我的是processing-1.4.1.js)
anything.html 你自己创建..可随意命名
anything.pde 这个也由你自己创建..可随意命名

anything.html里面需要输入：

<html>
<head>
    <title></title>
    <style type="text/css">
    *{
        margin: 0px;
        padding: 0px;
    }
    </style>
    <script type="text/javascript" src="processing-1.4.1.js"></script>   
</head>
<body>
    <canvas data-processing-sources="anything.pde“></canvas>
</body>
</html>

重点在于anything.pde里：

void setup()
{
    size(900,500);  
    background(125);
    fill(255);
    noLoop();
    PFont fontA = loadFont("courier");
    textFont(fontA, 14);  
}

void draw(){  
// Winston's handsome features don't need outlines
noStroke();

// face
fill(255, 255, 0);
ellipse(202, 208, 300, 300);

// eyes
fill(46, 46, 41);
ellipse(157, 151, 40, 40);
ellipse(304, 142, 40, 40);

// mouth
fill(252, 65, 65);
ellipse(257, 240, 120, 136);
}