p5.js削除しない古いフレーム

Question

p5というjavascriptフレームワークを使用して、画面上を移動する円をアニメーション化しようとしていますが、古いフレームは削除されず、キャンバスに線が表示されます。あなたが唯一の右のプログラムの冒頭で、一度background()関数を呼び出すためだ

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

。

次に、draw()関数が呼び出されるたびに、古いフレームを消去せずに別の円を描画します。

フレームごとに古いフレームを消去したい場合は、draw()ファンクションの先頭にあるbackground()関数を呼び出します。