p5.js的draw函数是如何工作的

Question

无法找出我做错了什么。看看下面的代码，我的逻辑是，每次调用draw函数时，椭圆的坐标都会变为另一个随机数。

然而，椭圆并没有改变坐标，而是在"新"坐标处重新绘制。

有人想弄清楚为什么要重新绘制而不是移动形状吗？我使用的是p5 javascript库。

var frate = 10;
var elliX = 500;
var elliY = 400;
function setup() {
createCanvas(100, 100);
frameRate(frate);
}
function draw() {
elliX = (random(0,100));
elliY = (random(0,100));
ellipse(elliX, elliY, 30);
}

Answer 1

p5默认情况下不会清除画布，所以每次绘制时都会添加一个新的圆圈。要清除，您可以预先调用clear()，如下所示：

var frate = 10;
var elliX = 500;
var elliY = 400;
function setup() {
createCanvas(100, 100);
frameRate(frate);
}
function draw() {
clear();
elliX = (random(0,100));
elliY = (random(0,100));
ellipse(elliX, elliY, 30);
}

<script src="https://unpkg.com/p5@0.6.1/lib/p5.min.js"></script>