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

Question

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

Pin*_*ise 9 window screen-size p5.js p5.play

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

有没有什么办法解决这一问题？

Answer 1

Sam*_*jig 13

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

另外，如果有人更改了窗口的大小，您将需要处理该问题，这可以通过windowResizedevent轻松完成。

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

function draw() {
  background(200);
}

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.min.js"></script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，11 月前
查看次数：	4649 次
最近记录：	2 年，9 月前