画布元素

Question

我正在使用此代码http://cssdeck.com/labs/pa0yqlki，该代码显示覆盖浏览器窗口大小的画布。

我能够在画布上显示内容（通过使用绝对定位和z-index：-1）

我无法做的是在画布后添加内容。 一旦画布结束，窗口结束，我想要<h1>让我们说。因此，当页面加载时应该会出现一个滚动条我应该能够滚动一点以便我看到<h1>。

有什么想法吗？

Answer 1

好的，感谢markE's回复，我能够达到我想要的效果。

[...] <canvas> </canvas>

<h1 id="myText"> Text </h1> [...]

这是我的HTML的一部分。 ＆＃34; myText＆＃34;将根据窗口的大小显示在画布下。

为此，我在CSS中添加了以下代码。

#myText
{
  padding-top: 100vh;
}

Answer 2

您可以通过使用CSS位置来实现；

尝试这样的事情：

<div>
  <canvas width="300" height="200" class="custom-canvas" />
  <div class="text">
    <div class="main">20 %</div>
    <div class="head">Completed</div>
  </div>
</div>

SCSS：

.custom-canvas{
  position: relative;
  clear: both;
  width: 450px;
  height: 200px;
}
.custom-canvas {
  .text {
    bottom: 13px;
    position: absolute;
    left: 6px;
    right: 0;
    text-align: center;
  }
  .head {
    margin-top: 14px;
  }
}

用左，右，上和下播放以达到准确位置。