Khan Academy 使用 ProccessingJS 的前身 p5.js ，抽象了一些在画布上显示事物的命令。
有关如何使 Khan Academy 代码在其编辑器之外工作的更多详细信息， 请参阅“ 在 Khan Academy 之外使用 ProcessingJS
以下是他们的例子：
<!DOCTYPE html>
<html>
<head>
<title>Processing.JS inside Webpages: Template</title>
</head>
<body>
<!--This draws the canvas on the webpage -->
<canvas id="mycanvas"></canvas>
</body>
<!-- Include the processing.js library -->
<!-- See https://khanacademy.zendesk.com/hc/en-us/articles/202260404-What-parts-of-ProcessingJS-does-Khan-Academy-support- for differences -->
<script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script>
<script>
var programCode = function(processingInstance) {
with (processingInstance) {
size(400, 400);
frameRate(30);
// Paste code from Khan Academy here:
fill(255, 255, 0);
ellipse(200, 200, 200, 200);
noFill();
stroke(0, 0, 0);
strokeWeight(2);
arc(200, 200, 150, 100, 0, PI);
fill(0, 0, 0);
ellipse(250, 200, 10, 10);
ellipse(153, 200, 10, 10);
}};
// Get the canvas that ProcessingJS will use
var canvas = document.getElementById("mycanvas");
// Pass the function to ProcessingJS constructor
var processingInstance = new Processing(canvas, programCode);
</script>
</html>
您可以输入任何代码并替换“在此处粘贴 Khan Academy 的代码”下方的内容
