如何在 html/js 的页脚上方创建画布？答案

【问题标题】：How to create canvas above footer in html/js?如何在 html/js 的页脚上方创建画布？
【发布时间】：2020-06-24 17:30:06
【问题描述】：

我正在尝试使用 p5 及其画布设置在我的网站上运行posenet。此页面上唯一的其他内容是顶部的导航栏和底部的页脚。由于在我接受视频权限后才创建画布，因此画布最终会在页脚下方创建。

<!-- <div>
  <br />
  <h1 class="display-4">
    Demo
  </h1>
      <script src="camera.js"></script>
  <br />
</div> -->

上面是 HTML 中应该运行脚本的部分。下面是应该用视频设置画布的 javascript

'''
let video;
let poseNet;
let pose;

function setup(){
    createCanvas(640, 480);
    video = createCapture(VIDEO);
    video.hide();
    poseNet = ml5.poseNet(video, modelLoaded);
    poseNet.on("pose", gotPoses)
}
'''

【问题讨论】：

标签： javascript html canvas video-capture p5.js

【解决方案1】：

您可以在您的 html 代码中创建一个特殊的空 div 并带有一些 id

<div id="poseContainer"></div>

您可以使用 html/css 随意定位。

在您的 p5.js 代码中，您可以使用 p5.Element.parent() 方法将画布分配给您的 div 容器，如下所示...

函数设置（）{
    常量 cnv = createCanvas(640, 480);
    cnv.parent("poseContainer");
}

这行得通吗？

【讨论】：

【解决方案2】：

选择标题
选择画布
将画布放在页眉之后

您可以使用两种 JavaScript 方法来实现这些步骤：querySelector() 和 after()。

function setup() {
  createCanvas(400, 400);
  let header = document.querySelector("#header");
  let canvas0 = document.querySelector("#defaultCanvas0");
  header.after(canvas0);
  background("pink");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<div id="header">Header</div>
<div>Footer</div>

【讨论】：