超越了p5.js中的background()函数

Question

我在p5.js中使用旋转和弧度绘制了一个星系草图，但每次在draw（）运行时加载background（）时，它都会被删除。有没有办法超越background（）函数？我希望这些星系仍在视野中。

 var stars;
function preload(){
//for (var i = 0; i < planetArray.length; i++) {
//stars = loadImage('Assets/stars.png');
}
function setup(){
  createCanvas(windowWidth, windowHeight);
}
function draw() {
  //background(0);
  star()
  //function mousepressed(){
}
  function star(){
  //angle = map(mouseX, 0,width, 0,360);
  //rotate(radians(angle*100));  
  noStroke();
  //translate(width/2, height/2);
  translate(mouseX,mouseY);
  fill(0);
  rotate(radians(frameCount%360)); //rotates output of ellipses
  rotate(radians(1000*frameCount%360));
  for(var i =0; i < 20; i++){
    push();
    noStroke();
    fill(random(200),0,random(150),random(2));
   // fill(random(125),random(250),random(100));
    ellipse(10*frameCount % (width/10),0,10,10);
    //image(stars, 10*frameCount % (width/2),0,10,10)
    //image((10*frameCount % (width/2),0,10,10)
    //
    pop();
  }
}

Answer 1

好吧，它真的没有任何魔力。调用background()函数会用纯色（或图像）填充窗口，并覆盖之前绘制的任何内容。

解决这个问题的方法不是"超越"background()函数。这是为了重组你的程序，让你的东西画得正确。具体如何做到这一点取决于你想要发生什么。

选项1:只调用background()函数一次。

如果你只想在一开始有一个黑色背景，并且你从draw()函数中所做的一切都应该加起来，那么也许你只想调用background()函数一次。例如，您可以将其作为setup()函数中的最后一行。

选项2:将要绘制的所有内容存储在数据结构中。

这可能是最典型的情况。如果你想在移动的形状后面绘制背景，你必须将这些形状存储在某种数据结构中，然后在每一帧中绘制所有形状。

选项3：绘制到屏幕外的图像，然后在背景上绘制该图像。

这是前两个选项的混合。您可以将所有内容（除了背景）绘制到屏幕外的PImage，然后将背景绘制到屏幕，然后将图像绘制到屏幕。这允许您拥有一个可以更改颜色的背景，而无需重新绘制其他所有内容。

你选择哪一个选项实际上取决于你想要发生什么。