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()功能。