Question

在我的学校，我正在学习如何使用名为codehs.com的网站在JS中编码。过了一会儿，我用JS学习了图形。有一点，我必须创建一个圆圈：

var circle = new Circle(50);
circle.setPosition(100,100);
add(circle);

几天后，我遇到了另一个网站，教会学生如何使用JS代码。该网站名为khanacademy.org我很感兴趣，并看到第一课是制作图纸。我查看了所提供的视频，它有一个不同的代码来制作一个圆圈。

ellipse(203, 197, 300, 350);

我很困惑，因为我刚刚开始使用JS制作一个圆圈。

Answer 1

我是CodeHS的创始人之一。 CodeHS在常规JavaScript之上使用自定义JavaScript库。 Khan Academy使用Processing JS，它是一个不同的库（如果你愿意，也可以在CodeHS上使用Processing。）

您可以在https://codehs.com/docs查看CodeHS JS库中所有内容的文档，并了解如何在Intro CS in JavaScript课程中使用它。

我们将此库设计为非常适合学习 - 它为您提供了使用面向对象编程的体验，同时使创建和操作像Helicopter Game等程序的形状变得简单。

此外，您可以通过将此脚本标记添加到页面来将该库包含在运行JavaScript的HTML页面上。

<script type="text/javascript" src="https://static.codehs.com/gulp/3d065bc81d3b7edf21e928ce2c764374a03c5cd6/chs-js-lib/chs.js"></script>

以下是运行JavaScript并使用CodeHS库绘制圆圈的完整HTML页面的示例。

<html>
<head>
<title>Circle Example</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript" src="https://static.codehs.com/gulp/3d065bc81d3b7edf21e928ce2c764374a03c5cd6/chs-js-lib/chs.js"></script>


<style>
canvas {
    border: 1px solid black;
    display: inline-block;
    vertical-align: top;
}

pre {
    border: 1px solid black;
    display: inline-block;
    width: 400px;
    height: 500px;
    background-color: #F5F5F5;
}
</style>

</head>

<body>
<h1>Circle Example</h1>



<canvas
width="400"
height="500"
class="codehs-editor-canvas"></canvas>

<script>
window.onload = function() {

    var circle = new Circle(50);
    circle.setPosition(100,100);
    add(circle);
};
</script>

</body>
</html>

Answer 2

看起来KHAN ACADEMY使用ProcessingJS绘制圆圈

我无法检查CodeHS用于绘制圆圈的库是什么，但必须是另一个。但事实是，有很多好的库在javascript中开发，可以制作出你能想象到的东西。他们通常彼此不同，但他们的目标是让我们的生活更轻松。

JavaScript library | Wikipedia

What's a JS library? | KHAN ACADEMY

Codehs和KhanAcademy使用不同的JavaScript？

2 个答案: