如何使画布完全适合p5中的窗口尺寸

Question

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

有什么办法可以解决这个问题吗？

Answer 1

您需要使用 CSS 关闭

<html>

和

<body>

标签的边距和填充（这会删除画布周围的白色边框），并关闭垂直滚动条。

此外，如果有人更改了窗口的大小，您将需要处理该问题，这可以通过

windowResized

事件轻松完成。

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

function draw() {
  background(200);
}

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

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>

Answer 2

我将边距和填充设置为0，画布看起来仍然大一点，但我尝试了这个

body{
  overflow:hidden;
  }

并且成功了。滚动条减小了视口的大小，因此隐藏它们可以使画布完美贴合。

如何使画布完全适合p5中的窗口尺寸

问题描述投票：0回答：2

2个回答

最新问题

如何使画布完全适合p5中的窗口尺寸

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2