p5.j​​s 旧帧不删除

Question

使用名为 p5 的 javascript 框架，我试图为在屏幕上移动的圆设置动画，但是旧框架不会删除，这会导致画布上显示一条线。

var xPos = 0;

function setup() {
    createCanvas(400, 200)
    background(123);
}

function draw() {
    ellipse(xPos, height/2, 30, 30); //Draws the circle
    fill(255);
    xPos++; //Moves the circle a pixel over
    if(xPos > width){xPos = 0;} //resets the circle when it reaches the edge of the canvas
}

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

Answer 1

那是因为您只background()在程序开始时调用该函数一次。

然后每次draw()调用该函数时，您都会绘制另一个圆圈 - 无需清除任何旧框架。

如果要清除每一帧的旧帧，请在background()函数开头调用该draw()函数。