p5.js 旧帧未删除

Question

使用名为 p5 的 javascript 框架，我试图为一个在屏幕上移动的圆圈制作动画，但是旧帧不会删除，这会导致在 canvas.

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() 函数时，您都会绘制另一个圆圈 - 不会清除任何旧帧。

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

p5.js 旧帧未删除

p5.js Old frames not deleting

javascript

animation

p5.js