p5.js 绘制函数如何工作？

Question

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

然而，不是更改坐标，而是在 'new' 坐标处重新绘制椭圆。

有谁愿意解释一下为什么要重绘而不是移动形状？我正在使用 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 不会清除 canvas，因此它会在您每次绘制时添加一个新圆圈。要清除，你可以预先调用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>

p5.js 绘制函数如何工作？

How does the p5.js draw function work?

javascript

visual-web-developer

p5.js