如何在P5js中使用createGraphics函数时执行函数？

Question

我想使用的createGraphics函数来绘制另一个屏幕上的东西...然后粘贴到我的主草图..

在实况

，他们给出的例子是做这样的事情：

var vignette; 

function setup(){ 
    createCanvas(710, 400); 
    vignette = createGraphics(400, 250); 
} 

function draw(){ 

    ellipse(mouseX, mouseY, 60, 60); 

    pg.background(51); 
    pg.noFill(); 
    pg.stroke(255); 
    pg.ellipse(mouseX-150, mouseY-75, 60, 60); 

    //Draw the offscreen buffer to the screen with image() 
    image(pg, 150, 75); 
} 

但我想要做的是比pg.background（51）

我要运行该功能，创建一个径向渐变更为复杂：

function drawGradient() { 
    for (let r = canvasX; r > 0; --r) { 
    let lightnes = map(r,0,canvasX,360,0) 
    fill(360, 360, lightnes) 
    ellipse(0, 0, r, r) 
    } 
} 

但如果我不vignette.drawGradient（）我得到的错误：vignette.drawGradient不是一个函数...

所以，我怎么就可以执行的createGraphics内drawgradient函数里面的东西像什么功能？

这里是codepen：https://codepen.io/giorgiomartini/pen/ZJjWbw?editors=0010

Answer 1

你不会把任何 “内部” createGraphics()功能。 createGraphics()函数返回p5.Renderer的实例。然后您调用该实例的函数。

您正试图拨打vignette.drawGradient()以正确的方向，但正如您发现的，p5.Renderer不包含drawGradient()函数。只有您的素描包含该功能，因为它是您创建的。

p5.Renderer包含绘图功能：这样的东西background()，fill()，rect()和ellipse()。所以如果你想绘制渐变到你的vignette渲染器，你必须调用实际在你的vignette变量上绘制东西的函数。像这样：

function drawGradient() { 
    for (let r = canvasX; r > 0; --r) { 
    let lightnes = map(r,0,canvasX,360,0) 
    vignette.fill(360, 360, lightnes) 
    vignette.ellipse(0, 0, r, r) 
    } 
}