0

我是编程新手，但已经完成了可汗学院绘图和动画部分的大部分练习。仅根据我的理解，我可以将 javascript 代码放置在 body 标记之间的脚本标记中。然而，当我打开我的网页时，我得到的只是样式和标题。

如何使用 Atom 文本编辑器制作动画或添加形状？我尝试查看可汗学院并注意到他们也使用 processing.js，这是我的代码无法在我的网页上运行的原因吗？我将在下面提供的代码将是我尝试绘制一个越来越大的太阳。script 标签内的代码是使程序完美运行所需的确切且唯一的代码。如果我遗漏了什么，我并不完全理解。如果没有，你能帮忙展示一下绘制简单圆形或矩形的代码吗（PS khan academy 只使用了 rect 和 ellipse 函数）？

请注意，我为此搜索了堆栈，但找不到令人满意的解决方案。另外，我在脚本标签中使用了 type=javascript，但是当我点击我的网页时，最终结果是一样的。

谢谢

我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello User</title>
    <h1 class="text_color">I am blue text on a screen</h1>
  </head>
  <style>
    body{
      background-color:rgb(5,113,176);
      font-family:arial;
      font-size:20px;
    }
      .text_color{
        color:blue;
        font-family:arial;
      }
  </style>
  <body>
    <script>
              noStroke();
        // the beautiful blue sky
        background(82, 222, 240);

        // the starting size for the sun
        var sunSize = 30;

        //Animation part

        draw = function() {

             // The sun, a little circle on the horizon
            fill(255, 204, 0);
            ellipse(200, 298, sunSize, sunSize);

            // The land, blocking half of the sun
            fill(76, 168, 67);
            rect(0, 300, 400, 100);
            sunSize = sunSize+1;
};
    </script>
  </body>
</html>
4

1 回答 1

1

首先，您必须将 p5.js 链接到您的 HTML 文档中，因为您使用在 p5.js 中声明的函数。

尝试：

<script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>

在底部<body>

然后把你的 noStroke(); 和背景（）；进入函数 setup() 因为 p5 变量和函数名称在 setup()、draw()、mousePressed() 等之外不可用。

function setup(){
    noStroke();
    background(82, 222, 240);
  }

希望这对你有用。

于 2019-11-25T09:02:01.217 回答