p5.js形状调整留下先前的轮廓可见

Question

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

我遇到的问题是先前绘制的形状的轮廓仍然存在，给出了后续效果。

我试过了noStroke()修饰符，但那根本不绘制形状。以及noFill()给出了一个甚至是怪异的，但仍然不正确，behavoir。

代码示例：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找到。