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;
}

Canvas 对象没有改变 X 位置？

Canvas object not changing X position?

javascript

p5.js