javascript - p5.j​​s 的绘图功能是如何工作的？

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);
}

标签： javascriptp5.jsvisual-web-developer

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>