如何使用Atom文本编辑器向空白网页添加形状?

问题描述 投票:0回答:1

我是编程新手,但是已经完成了可汗学院绘画和动画部分的大部分练习。仅根据我的理解,我就可以将javascript代码放置在位于body标签之间的script标签内。但是,当我打开网页时,我得到的只是样式和标题。

如何使用Atom文本编辑器设置动画或添加形状?我尝试查看可汗学院,发现它们也使用了processing.js,这是我的代码无法在我的网页上运行的原因吗?我将在下面提供的代码将是我试图画出越来越大的太阳的尝试。 script标记内的代码是使程序完美运行所需的确切且唯一的代码。如果我缺少某些东西,我无法完全理解。如果不是,您能否帮助显示用于绘制简单圆形或矩形的代码(PS可汗学院仅使用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>
javascript html css atom-editor khan-academy
1个回答
1
投票

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

尝试:

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

[C0的底部

然后放入您的noStroke();和Background();进入功能setup(),因为p5变量和函数名称在setup(),draw(),mousePressed()等之外不可用。

<body>

希望这对您有用。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.