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



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

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

请注意,我在堆栈中搜索了这个,但找不到令人满意的解决方案。另外,我在脚本标签中使用了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>

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

尝试:

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

<body>的底部

然后将你的noStroke((和Background((放入funtion setup((中,因为p5变量和函数名称在setup((,draw((,mousePressed((等之外不可用。

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

希望这对你有用。

最新更新