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找到。