绘图功能未按预期循环

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 because in the setup() method you're calling createCanvas(xcord,ycord) and that doesn't exist on it's own. If you want to rabbit hole on that task check out this medium article 的使用，它会引导您完成创建 canvas 元素然后绘图的所有要求canvas

您还确认您在浏览器刷新时至少绘制了 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 下载的一个小训练练习中删除了等量的代码，认为我可以基本上将它用作一个空的沙坑来玩。但显然还有更多的事情发生在引擎盖下！

再次感谢！

绘图功能未按预期循环

draw function not looping as expected

javascript

random

loops

refresh

draw