绘制函数未按预期循环

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

我在这里是个初学者,所以提前为自己的幼稚道歉。我在Brackets上用Javascript做了一个简单的图片,试图用随机的x、y值和随机的颜色生成圆圈。当我在开发者工具中打开浏览器控制台时,没有任何问题显示,当我保存和刷新时,它可以工作。但我希望刷新发生在绘制函数的循环上。有什么线索可以告诉我哪里出了问题吗?

非常感谢

var r_x
var r_y
var r_width
var r_height
var x
var y
var z


function setup() 
{
    r_x = random()*500;
    r_y = random()*500;
    r_width = random()*200;
    r_height = r_width;
    x = random(1,255);
    y= random(1,255);
    z= random(1,255);

    createCanvas(512,512);
    background(255);

}

function draw()
{

    ellipse(r_x, r_y, r_width, r_height);
    fill(x, y, z);
}
javascript loops random refresh draw
1个回答
0
投票

Brackets.io只是你的文本编辑器(或IDE,如果你想技术化的话)--所以我们可以把它从等式中删除。接下来让我困惑的是,有些东西必须明确地调用你的 draw() 方法和 setup() 方法 -

我想你是在某种库中工作,创建的库是为了简化与 Canvas API 因为在 setup() 的方法 createCanvas(xcord,ycord) 而这本身并不存在。如果你想在这个任务上钻兔子洞,可以看看这个。媒介文章它引导你了解创建画布元素的所有要求,然后在画布上绘图。

你也确认你在浏览器刷新时至少画了一个圆,所以我认为你需要关注的是:1)在加载时启动你的代码,2)一个循环,我们就接受后台运行的魔法来处理其他一切。

在你工作的文件底部添加这个。

// when the page loads call drawCircles(), 
// i changed the name to be more descriptive and i'm passing in the number of circles i want to draw, 
// the Boolean pertains to event bubbling  
window.addEventListener("load", drawCircles(73), false);

在你的 drawCircles() 方法,你将需要添加循环。

// im using a basic for loop that requires 3 things:
// initialization, condition, evaluation
// also adding a parameter that will let you determine how many circles you want to draw
function drawCircles(numCircles) {
  for (let i = 0; i < numCircles; i++) {
    ellipse(r_x, r_y, r_width, r_height);
    fill(x, y, z);
  }
}

这里有一个 联通 我是修修补补的一段时间回来,做了很多同样的事情,你是。

希望对你有所帮助--祝你在新的学习生涯中好运,它非常值得你去攀登!


0
投票

非常感谢你的帮助! 你说的很有道理--我基本上删除了通过coursera下载的一个小培训练习中的等量代码,以为这样我就可以基本上把它当成一个空沙坑来玩了。但很明显,这里面的东西远不止这些!

再次感谢!

© www.soinside.com 2019 - 2024. All rights reserved.