javascript - Canvas 对象不改变 X 位置？

Question

我尝试在每次draw() 时将对象的 X 位置更改 1。但是，椭圆没有移动，并且我没有收到任何错误。

function setup() {
    createCanvas(windowWidth, windowHeight - 4);
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight - 4);
}

function draw() {
    background(51, 51, 51);

    var el1 = {
        x: 100,
        y: 100,
        width: 50,
        height: 50
    };

    var el2 = {
        x: 300,
        y: 300,
        width: 50,
        height: 50
    };

    ellipse(el1.x, el1.y, el1.width, el1.height);
    ellipse(el2.x, el2.y, el2.width, el2.height);
    el1.x = el1.x + 1;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>

Answer 1

您每帧都会重新创建 el1 和 el2 变量，因此您将以其默认值重新启动它们。

如果您想修改单个el1变量，那么您需要在草图的顶部声明它。

比较此代码:

function draw(){
  var x = 42;
  console.log(x); // always prints 42
  x = x + 1;
}

对于此代码:

var x = 42;

function draw(){
  console.log(x);
  x = x + 1;
}