如何使画布完全适合 p5 中的窗口大小

【问题标题】：how do i make the canvas perfectly fit to the window size in p5如何使画布完全适合 p5 中的窗口大小
【发布时间】：2021-06-18 04:23:17
【问题描述】：

我想让 p5 画布完全适合窗口大小，但是每当我使用 windowWidth 和 windowHeight 时，画布似乎更大：

有没有办法解决这个问题？

【问题讨论】：

标签： window p5.js screen-size p5.play

【解决方案1】：

您需要使用 CSS 关闭 <html> 和 <body> 标签的边距和内边距（这会删除画布周围的白色边框），并关闭垂直滚动条。

此外，如果有人更改了窗口的大小，您需要处理，这可以通过 windowResized event 轻松完成。

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

function draw() {
  background(200);
}

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

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

&lt;script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.min.js"&gt;&lt;/script&gt;

【讨论】：