如何在 React 中将内容放在画布上答案

【问题标题】：How can I put content over my canvas in React如何在 React 中将内容放在画布上
【发布时间】：2020-11-21 17:26:54
【问题描述】：

这是我的画布和导航栏的代码，看起来像这样：

<DashboardNavbar style={{ zIndex: 2 }} />
  <canvas id="canvas" style={{ background: "#232323", width: "100%", zIndex: 1 }}
></canvas>

问题是我想实现这样的目标：


<canvas id="canvas" style={{ background: "#232323", width: "100%", zIndex: 1 }}>
<DashboardNavbar style={{ zIndex: 2 }} />
</canvas>

我希望我可以显示我的画布，其行为类似于网站的背景，因此我可以在它上面显示内容，在这种情况下它是我的导航栏，但我计划在导航栏下方显示更多内容，并将画布作为我的背景。

我尝试过的：

使用 zIndexes 将我的画布放在导航栏下方，但这不起作用
尝试在画布上使用绝对位置和相对位置，但也不起作用

【问题讨论】：

标签： javascript html css reactjs canvas

【解决方案1】：

您可以使用“布局 div”作为您将放置在画布上的所有元素的背景，就在画布之后，并且画布和布局 div 都应该具有绝对位置并且需要位于另一个 div 内：

const DashboardNavbar = () => (
  <div className="navbar">Hello</div>
)
const HelloWorld = () => (
  <div className="main">
      <canvas id="canvas" style={{ background: "#232323", width: "100%", height:100}} />
      <div className="layout">
         <DashboardNavbar />  
      </div>
  </div>
)
ReactDOM.render(<HelloWorld />, document.getElementById('app'))

CSS

.layout{
  position:absolute;
  width:100%;
  height:100px;
}
#canvas{
  position: absolute;
}
.navbar{
  color: white;
  background-color: blue;
  padding:2px;
  margin:20px;
}

HTML

<div id="app"></div>

Codepen working example

【讨论】：