p5.j​​s形状调整让前面的轮廓可见

Question

我试图使用p5.js从屏幕上的滑块派生的值来简单地调整对象的形状。

我遇到的问题是先前绘制的形状的轮廓仍然存在，从而产生后跟效果。

我尝试了noStroke()修饰符，但是根本没有绘制形状。同样，noFill()给出了一个更奇怪但更不正确的行为。

代码示例：https://codepen.io/galleywest/pen/oejxyY

var slider

function setup() {
  createCanvas(600, 600)
  slider = createSlider(0, 50, 0)
}

function draw() {
  rect(10, 10, 80, 80, slider.value())
}

如何缓解此行为？

Answer 1

您需要调用background()函数来清除旧框架。

var slider

function setup() {
  createCanvas(600, 600)
  slider = createSlider(0, 50, 0)
}

function draw() {
  background(255, 0, 0); //draws a red background
  rect(10, 10, 80, 80, slider.value())
}

可以在the reference找到更多信息。