p5js如何让画布全屏

要在p5.js中实现画布全屏，可以通过使用p5.js提供的createCanvas函数、windowWidth和windowHeight变量、以及resizeCanvas函数来实现。设置画布全屏的关键步骤包括创建适合窗口大小的画布、在窗口大小发生变化时调整画布尺寸、以及处理画布的样式。

一、创建全屏画布

首先，最简单的方法是在p5.js的setup函数中使用createCanvas(windowWidth, windowHeight)。这将创建一个与浏览器窗口大小一致的画布。

function setup() {
  createCanvas(windowWidth, windowHeight);
}

二、处理窗口大小变化

当用户调整浏览器窗口大小时，画布也需要随之调整。为此，我们可以在p5.js的windowResized函数中调用resizeCanvas(windowWidth, windowHeight)。

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

三、设置画布样式

为了确保画布全屏显示，还需要调整一些CSS样式，例如删除默认的滚动条和边距。可以在HTML文件的<style>标签中添加以下CSS代码：

<style>
  body {
    margin: 0;
    overflow: hidden;
  }
</style>

四、综合实现

下面是一个完整的p5.js代码示例，实现了全屏画布，并处理了窗口大小变化：

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(220);
}
function draw() {
  // 在这里添加绘图代码
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

五、详细描述：创建全屏画布

1. 创建全屏画布

在setup函数中调用createCanvas(windowWidth, windowHeight)，可以创建一个与浏览器窗口大小一致的画布。这意味着无论用户使用何种设备，画布都会自动适配窗口大小，从而提供一致的用户体验。

2. 处理窗口大小变化

在用户调整浏览器窗口大小时，通过在windowResized函数中调用resizeCanvas(windowWidth, windowHeight)，可以重新调整画布的大小。这确保了画布始终占据整个窗口，无论窗口如何变化。

3. 设置画布样式

为了避免滚动条和默认的页面边距影响全屏效果，可以在HTML文件中添加一些CSS样式。例如，通过设置body的margin为0和overflow为hidden，可以确保画布完全占据窗口，不会出现滚动条。

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script>
      function setup() {
        createCanvas(windowWidth, windowHeight);
        background(220);
      }
      function draw() {
        // 在这里添加绘图代码
      }
      function windowResized() {
        resizeCanvas(windowWidth, windowHeight);
      }
    </script>
  </body>
</html>

六、画布的高级设置与优化

1. 响应用户交互

在全屏画布中，可以添加用户交互功能，例如鼠标点击、拖动等。例如，可以在draw函数中添加代码，使得用户点击画布时，会在点击位置绘制一个圆形。

function draw() {
  if (mouseIsPressed) {
    fill(0);
    ellipse(mouseX, mouseY, 50, 50);
  }
}

2. 动态调整画布内容

在窗口大小变化时，不仅需要调整画布尺寸，还可能需要重新绘制画布内容。例如，可以在windowResized函数中重新设置背景颜色或重新绘制图形。

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(220);
}

3. 优化性能

在全屏画布中绘制复杂图形时，可能会影响性能。可以通过减少绘制频率或优化绘图算法来提升性能。例如，可以在draw函数中添加条件语句，限制绘制频率。

let lastTime = 0;
function draw() {
  let currentTime = millis();
  if (currentTime - lastTime > 100) {
    // 每100毫秒绘制一次
    background(220);
    fill(0);
    ellipse(mouseX, mouseY, 50, 50);
    lastTime = currentTime;
  }
}

七、案例分析

1. 简单绘图应用

可以创建一个简单的绘图应用，用户可以在全屏画布上自由绘图。以下是一个示例代码：

let isDrawing = false;
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(220);
}
function draw() {
  if (isDrawing) {
    stroke(0);
    strokeWeight(4);
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}
function mousePressed() {
  isDrawing = true;
}
function mouseReleased() {
  isDrawing = false;
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  background(220);
}

2. 动态背景效果

可以创建一个动态背景效果，例如渐变背景或粒子效果。以下是一个示例代码，实现了一个简单的粒子效果：

let particles = [];
function setup() {
  createCanvas(windowWidth, windowHeight);
}
function draw() {
  background(0);
  for (let i = 0; i < particles.length; i++) {
    particles[i].move();
    particles[i].display();
  }
}
function mousePressed() {
  for (let i = 0; i < 10; i++) {
    particles.push(new Particle(mouseX, mouseY));
  }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(5, 15);
    this.speedX = random(-2, 2);
    this.speedY = random(-2, 2);
  }
  move() {
    this.x += this.speedX;
    this.y += this.speedY;
  }
  display() {
    fill(255);
    noStroke();
    ellipse(this.x, this.y, this.size);
  }
}

八、总结

通过使用p5.js创建全屏画布，可以为用户提供更好的视觉体验和交互效果。通过结合createCanvas(windowWidth, windowHeight)和resizeCanvas(windowWidth, windowHeight)，可以确保画布始终适配窗口大小。此外，通过添加一些CSS样式和优化绘图算法，可以进一步提升全屏画布的性能和用户体验。在实际应用中，可以结合各种绘图和交互功能，创建丰富多样的全屏画布效果。