无法使用草图居中和填充视口 p5.js

Question

我正在尝试将我的草图居中，但我无法做到这一点。我希望我的 canvas 在桌面和移动设备上占据整个屏幕，并且始终将我的草图放在中间。我错过了什么？

以前，我只会用

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

它会起作用的。我猜这是因为我的动画定位，但我不知道如何处理它。

这是我到目前为止得到的：JS fiddle

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="resources\p5.js"></script>
    <script src="resources\p5.dom.js"></script>
    <script src="resources\p5.sound.js"></script>
    <script type="text/javascript" src="js\app.js"></script>
    <link rel="stylesheet" href="css\style.css">
    <title>Breathe</title>
</head>
<body>

</body>
</html>

CSS

   * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

JavaScript (p5.js)

let outerDiam = 0;
let cnv;
let mySounds = []

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

function setup() { 
   cnv = createCanvas(windowWidth, windowHeight);
   centerCanvas();
} 

function windowResized() {
   centerCanvas();
}

function draw() { 
  background(220);
  for (let i = 0; i < 5; i++){
        let diam = outerDiam - 30 * i;    
      if (diam > 0) {

        let fade = map(diam, 0, width, 0, 255);
          stroke(fade);
          noFill();
          ellipse(300, 300, diam);
    }
    } 
    outerDiam = outerDiam + 2;
  }

function mousePressed() {
  outerDiam = 0;
}

Answer 1

canvas 与 "viewport"

的相关性

当您创建一个 canvas 时，根据您的 js 脚本在 HTML 中执行该操作的位置，它将在正常的 HTML 流程中作为块元素（不是 100 % 确定，但有信心）。

因此，应在包含我们脚本的父文件中处理相对于视口的 canvas 居中，在本例中为我们的 HTML 文件。 p5.js 的 wiki on positioning the canvas 提供了一个可靠且简洁的基于场景的文档化解决方案，与您非常相关！

了解 canvas 解剖结构

当你创建canvas时，它以canvas的左上角为原点，并设置如下所示的坐标系

p5.js coordinate system

现在是实际问题

当您创建该椭圆时，由于 ellipse(300, 300, diam);，它总是位于 300,300 的位置。现在的问题是如何将呼吸集中到 canvas?

有几种方法！

在canvas中间画椭圆。
使 canvas 足够大以产生呼吸效果，并使 canvas 背景与您页面的背景颜色相匹配，并使用 HTML 或 [=48 将脚本置于中心=]

这些只是实现您想要做的事情的 2 种方法。还有更多。

注意：我的解释相当简单，没有提及 rectMode 或 ellipseMode 等。您可以去文档中查找它们，它们可能会提供一些帮助。 祝你好运！‍

无法使用草图居中和填充视口 p5.js

Unable to Center and fill the viewport with the sketch p5.js

javascript

p5.js

HTML

CSS

JavaScript (p5.js)

canvas 与 "viewport"

了解 canvas 解剖结构

现在是实际问题