JavaScript:显示图形，如rect(），triangle(），ellipse(）等

JavaScript: Displaying Graphics like rect(), triangle(), ellipse(), etc

本文关键字：triangle ellipse rect 显示 显示图 图形 JavaScript      更新时间：2023-09-26

我正在 Khan Academy 和 Codecademy 上学习 JavaScript。 我刚刚开始学习。 我真的很喜欢Khan教授JS的方式，但是，除了Khan的引擎之外，我没有找到任何方法可以将我所学的知识应用于其他任何地方。 Khan专注于图形，而不是基于控制台的命令。

我真正想要的是一种方法，我可以将我在Khan（图形）和Codecademy（控制台）上学到的知识"运行"在我的PC上离线运行。 因此，例如，我将能够"运行"所有这些函数，等等：

confirm（）， prompt（）， rect（）， triangle（）， ellipse（）， console.log（） 等等， 等等.

那么，谁能向我解释如何在我的PC上离线编写，保存和运行这样的JavaScript程序？

Khan Academy 上的编程使用 JavaScript 语言和库 ProcessingJS。

下面是从处理.js快速入门派生的独立程序示例。 这将执行一个非常简单的动画。

图形函数将与 khanacademy.org 和此处的文档相匹配。

要运行它，您需要从此处下载文件"processing.js"并将以下内容保存为"hello.html"（或任何您想称呼它的内容），然后使用浏览器打开"hello.html"。

<script src="processing.js"></script>
<script type="application/processing" data-processing-target="pjs">
void setup() {
  size(200, 200);
  stroke(0), strokeWeight(2);
  println('hello web!');
}
void draw() {
  background(100); // clear the frame
  ellipse(abs(frameCount%400-200), 50, 25, 25);
}
</script>
<canvas id="pjs"> </canvas>

替代方案：高级JavaScript编程风格

这是一个独立的JavaScript程序示例，基于处理.js快速入门中的片段 - 它绘制（并动画）一个小的模拟时钟。

可用的图形函数与上面相同，但这里它们需要前缀processing - 要sketchProc() below的参数。 特别要注意 processing.line() 的调用。

运行此程序的说明与上述相同 - 只需将以下.html文件与文件processing.js一起放入文件夹中...

<!DOCTYPE html>
<html>
<head>
  <title>Hello Web - Processing.js Test</title>
  <script src="processing.js"></script>
</head>
<body>
  <h1>Processing.js Test</h1>
  <p>This is my first Processing.js web-based sketch:</p>
  <canvas id="canvas"></canvas>
   <script>
   function sketchProc(processing) {
      processing.draw = function() {
      var centerX = processing.width / 2, centerY = processing.height / 2;
      var maxArmLength = Math.min(centerX, centerY);
      function drawArm(position, lengthScale, weight) {
         processing.strokeWeight(weight);
         processing.line(centerX, centerY,
         centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
         centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
      }
      processing.background(224);
      var now = new Date();
      var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
      drawArm(hoursPosition, 0.5, 5);
      var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
      drawArm(minutesPosition, 0.80, 3);
      var secondsPosition = now.getSeconds() / 60;
      drawArm(secondsPosition, 0.90, 1);
      };
   }
   var canvas = document.getElementById("canvas");
   var processingInstance = new Processing(canvas, sketchProc);
   </script>
</body>
</html>

你不必在线运行 JavaScript。JavaScript 是一种客户端语言，这意味着它可以在您的 Web 浏览器中运行。由于你处于JavaScript阶段，我假设你至少知道HTML的基础知识，希望是CSS。

您可以通过将此标记放在该部分中来在 HTML 文档中包含 JavaScript 文件。

<html>
  <head>
  <script src="/path/relavite/to/htmlpage/your.js"></script>
  </head>
...
</html>
然后，

您可以打开浏览器，然后打开文件>打开您的 html 页面，该页面现在已链接到它，或者您可以在文件浏览器中右键单击.html文件，然后使用> Chrome、FireFox 等打开以在本地查看页面。

同样，运行这些文件不需要连接到网络，因为它们存储在本地计算机上。

编辑不妨包括文件结构。以这种方式可视化可能更容易。

在本地计算机上，创建一个名为"myjavascripttest"的文件夹。在此文件夹中，您可以创建三个文件：索引.html、样式.css和脚本.js

HTML 文件的内容是：

<html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="/path/relavite/to/htmlpage/your.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>
</html>

CSS文件的内容是：

p {
  background-color: blue;
}

JavaScript 文件的内容是：（注意：这是 jQuery，JavaScript 的扩展）

$(document).ready(function() {
    $(this).css('background-color', 'red');
});

现在，在浏览器中加载HTML文件将显示一个带有红色背景的段落，尽管CSS显然说它应该是蓝色的。因此，JavaScript 必须运行！

显而易见的解决方案是在磁盘上创建一个 HTML 文件，其中包含包含要运行的代码的标记。在浏览器中打开以运行，刷新页面以重新运行。

如果要创建命令行程序，也可以使用 nodejs，或者不使用浏览器。

确认和提示是本机浏览器调用，但在 NodeJS 的情况下需要特定的实现。 矩形、三角形和椭圆在这两种情况下都需要专门实现。 控制台.log在 NodeJS 和浏览器中都本机工作。

相关文章：