Question

为我的摄影建立一个网站，我努力使背景画布跨越页面的整个高度。此外，画布内的星星有时会变长 - 你必须刷新才能使它们的尺寸正确。

画布的html代码：

  <body>
   <canvas id="canvas"></canvas>
  <header>

css代码：

canvas {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 min-height: 100%;
 z-index:-1;
 background: #111;
}

图片：

Answer 1

因为您希望画布用作背景图像。为什么不将元素固定在屏幕上？

示例position:fixed（您已将宽度和高度设置为100％）

   #canvas{
    position: fixed;
    }

Answer 2

在CSS中，更改以下内容：

.container {
  width: 100%;
  /* position: relative; */
  top: 60px;
  padding-right: 70px;
  padding-left: 60px;
  /* padding-bottom: 30px; */
}

使容器的位置是相对的，并且填充底部在底部创建空白。

Answer 3

在回答细长的星星时 - 我在JS的开头添加了一个加载函数：

  window.onload = function() {

     // canvas shiz
 }