绘制函数未按预期循环

Question

我是这里的初学者，所以提前为幼稚道歉。我使用 Javascript 在 Brackets 上制作了一个简单的图像，尝试生成具有随机 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);
}

Answer 1

Brackets.io 只是您的文本编辑器（或 IDE，如果您想要技术的话） - 所以我们可以从等式中删除它。接下来让我感到困惑的是，必须明确调用您的 draw() 方法以及 setup() 方法 -

我认为您正在使用某种库来简化使用Canvas API 的工作，因为在setup() 方法中您调用的是createCanvas(xcord,ycord)，而它本身并不存在。如果您想在该任务上打个洞，请查看此medium article，它会引导您完成创建画布元素然后在该画布上绘图的所有要求

您还确认您在浏览器刷新时至少绘制了 1 个圆圈，所以我认为您需要关注的只是 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);
  }
}

这是一个link to a codepen，不久前我正在修补它，它做了很多与你相同的事情

我希望这会有所帮助 - 祝你在新的学习冒险中好运，值得一试！

Answer 2

非常感谢您的帮助！你说的很有道理——我基本上从通过 coursera 下载的一个小训练练习中删除了等量的代码，我认为我基本上可以将它用作一个空的沙坑来玩。但显然还有更多事情要做！

再次感谢！