时间戳

首页 > 解决方案 > 无法使用草图 p5.js 居中并填充视口

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

标签： javascriptp5.js

解决方案

画布与“视口”的相关性

当您创建画布时，取决于您的 js 脚本在 HTML 中执行该操作的位置，它将作为块元素在正常的 HTML 流中（对此不是 100% 肯定，但有信心）。

因此，画布相对于视口的居中应该在包含我们脚本的父级中处理，在这种情况下，我们的 HTML 文件。p5.j​​s 的关于定位画布的 wiki提供了一个可靠而简洁的基于场景的文档解决方案，与您非常相关！

了解画布解剖结构

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

p5.Js坐标系 p5.j​​s 坐标系

现在实际问题

当您创建该椭圆时，300,300由于ellipse(300, 300, diam);. 现在的问题是你如何将呼吸置于画布的中心？

有几种方法！

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

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

注意：我通过不提及 rectMode 或 ellipseMode 等来保持我的解释相当简单。您可以去查看它们可能会提供一些帮助的文档。 祝你好运！‍</p>

推荐阅读