javascript - 将 div 居中放在 Canvas 的顶部，该 Canvas 的大小响应于 window.innerWidth 和 window.innerHeight

Question

我正在尝试将一些文本添加到 Canvas 背景的中间。我很难弄清楚如何在 IT 之上添加一个 div，它将通过分辨率更改保持位置。

首先，这是我的 Canvas 的大小调整方式。

var canvas = document.getElementById('first-canvas');
var ctx = canvas.getContext('2d');

initialize()

function initialize() {
  window.addEventListener('resize', resizeCanvas, false);
  resizeCanvas();
}

function redraw() {
  ctx.strokeStyle = 'black';
  ctx.lineWidth = '5';
  ctx.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  redraw();
}

html,
body {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  /* No floating content on sides */
}

body {
  overflow-x: hidden;
}

#btn-container {
  display: flex;
  justify-content: center;
  text-align: center;
}

#first-canvas {
  background-color: #393939;
  overflow: hidden;
  position: relative;
}

#scroll-btn {
  display: flex;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 0px;
  margin: 0;
  padding: 0;
  font-color: white;
  border: solid 2px white;
  width: 250px;
  height: 75px;
}

<section class="canvas">
  <canvas id="first-canvas" style="position:relative; left: 0px; top: 0px;"></canvas>
  <a href="#">
    <div id="btn-container">
      <div id="scroll-btn">
        <h3>View My Page></h3>
      </div>
    </a>
  </div>
<section>

基本上，我想在 Canvas 中间添加一个 div，这样我就可以添加一些欢迎文字并保持我的 scroll-btn。

Answer 1

html,
body {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0;
  /* No floating content on sides */
}

body {
  overflow-x: hidden;
}

#btn-container {
  display: flex;
  justify-content: center;
  text-align: center;
}

#first-canvas {
  background-color: #393939;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#scroll-btn {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 0;
  font-color: white;
  border: solid 2px white;
  width: 250px;
  height: 75px;
}
.canvas {
   width: 100%;
   height: 100%;
   position: relative;
}
a {
   display: block;
   position: absolute;
   z-index: 1;
   top: calc(100% - 37.5px);
   left: calc(100% - 125px);
}
h3 {
   margin: auto;
}