无法将草图p5.js居中并填充视口

时间：2019-10-24 19:49:19

标签： javascript p5.js

我正在尝试将草图居中，但这样做有麻烦。我希望我的画布能占据台式机和移动设备的整个屏幕，并且始终将草图放在中间。我想念什么？

之前，我只会使用

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;
}

1 个答案:

答案 0 :(得分：0)

画布与“视口”的相对性

创建画布时，取决于您的js脚本在HTML中的位置，它会作为块元素出现在常规HTML流程中（对此不确定100％，但有把握）。

因此，应在包含我们脚本（在本例中为HTML文件）的父级中处理画布相对于视口的居中位置。 p5.j​​s的wiki on positioning the canvas提供了一个坚实而简洁的基于场景的文档化解决方案，与您非常相关！

了解画布的解剖结构

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

p5.Js coordinate system p5.js coordinate system

现在是实际问题了

在创建该椭圆时，由于300,300，它始终将位于ellipse(300, 300, diam);的位置。现在的问题是，如何将呼吸集中在画布上？

有几种方法！

  • 在画布中间绘制椭圆。
  • 使画布足够大以达到呼吸效果，并使画布背景与页面的背景颜色匹配，并使用HTML或CSS将脚本放置在中心位置

这些只是实现您想要做的两种方法。还有很多。

注意：我通过不提rectMode或ellipseMode等来简化我的解释。您可以在它们可能提供一些帮助的文档中查找它们。 祝你好运！?‍?

相关问题
最新问题