Question

以下代码使用p5dom附加组件将画布定位在窗口的中心。要使用windowResized（）函数动态调整画布大小。我想在设置中保留后台功能。调整窗口大小时，如何防止背景颜色清除？非常感谢。

var cnv;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() {
  cnv = createCanvas(windowWidth,windowHeight);
  centerCanvas();
  background(255, 0, 200);
}

function draw(){

}

function windowResized() {
  centerCanvas();
  resizeCanvas(windowWidth,windowHeight)
}

Answer 1

您可能要做的一件事是将所有内容绘制到缓冲区而不是直接绘制到屏幕上。 createGraphics()功能是您的朋友。来自the P5.js reference：

var pg;
function setup() {
  createCanvas(100, 100);
  pg = createGraphics(100, 100);
}
function draw() {
  background(200);
  pg.background(100);
  pg.noStroke();
  pg.ellipse(pg.width/2, pg.height/2, 50, 50);
  image(pg, 50, 50);
  image(pg, 0, 0, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>

您可能希望将所有内容绘制到缓冲区，然后在调整屏幕大小时重绘该缓冲区。

Answer 2

只需将背景功能添加到绘图中。

试试这个：

var cnv;

function centerCanvas() {
  var x = (windowWidth - width) / 2;
  var y = (windowHeight - height) / 2;
  cnv.position(x, y);
}

function setup() {
  cnv = createCanvas(windowWidth,windowHeight);
  centerCanvas();
  background(255, 0, 200);
}

function draw(){
  //HERE:
  background(255, 0, 200);
}

function windowResized() {
  //(you can add it here too...)
  centerCanvas();
  resizeCanvas(windowWidth,windowHeight);
}

Answer 3

对于替代方法，您可以使用CSS使用类似于以下内容的方式编辑尺寸：

<style>
    canvas {
      width: 100%;
      height: 100%;
    }
</style>

Answer 4

我只需在windowResized函数中设置背景。

function windowResized() {
  centerCanvas();
  resizeCanvas(windowWidth,windowHeight)
  background(255, 0, 200);
}

p5调整窗口大小而不清除背景

4 个答案: