如何通过Html5-canvas呈现Vue组件

Question

我想使用一个htmlcanvas，一个画布作为网页的背景，然后在它上面渲染各种Vuejs组件。

我确信信息就在那里，我只是不知道该搜索什么。

Answer 1

您可以使用带有position: absolute的CSS设置任何元素的样式，以将元素覆盖在画布顶部。

​

.container {
  position: relative;
  width: 300px;
  height: 300px;
}

.canvas {
  width: 300px;
  height: 300px;
  background-color: yellow;
}

.overlay {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 100px;
  height: 100px;
  background-color: orange;
}

<div class="container">
  <canvas class="canvas"></canvas>
  <div class="overlay">
    This is displayed on top of the canvas
  </div>
</div>

​