如何让动态画布元素位于偏移 div 内的其他内容后面？

Question

我正在使用 granim.js 在

canvas

中生成动态移动的渐变。我希望它成为

div

元素的背景内容。因为 granim.js 动态生成内容，所以使用

canvas.toDataUrl()

不起作用，将

position

设置为

absolute

或

relative

以及将

top/bottom/left/right

设置为

0

不起作用，因为

div

是与屏幕边缘的偏移。我可以使用

.getBoundingClientRect()

计算绝对位置并以这种方式设置

top

（见底部），但我觉得必须有一个更优雅的解决方案。我在下面附加了一些代码片段，希望对您有所帮助。谢谢！

HTML：

<main>
  <div class="wrapper">
    <div class="granim-wrapper">
      <canvas id="granim-canvas" height="565" width="837"></canvas>
    </div>

    <h1>This is some content.</h1>
  </div>
</main>

CSS：

body {
  width: 100%;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
}

main {
  margin: 30px;
  flex-grow: 1;
  border: 1px solid black;
}

canvas {
  display: block;
  z-index: -1;
}

JS：

import Granim from "granim";

function resizeCanvas(canvas: HTMLCanvasElement) {
  const main = document.querySelector('main');

  canvas.height = main.clientHeight;
  canvas.width = main.clientWidth;
}

const canvas = document.getElementById('granim-canvas') as HTMLCanvasElement;
window.onresize = () => {resizeCanvas(canvas)};

window.onload = () => {
  resizeCanvas(canvas)

  const granimInstance = new Granim({
    element: "#granim-canvas",
    name: "granim",
    opacity: ["1", "1"],
    states: {
      "default-state": {
        gradients: [
          ["#8093F1", "#FDC5F5"],
          ["#B388EB", "#72DDF7"],
        ],
        loop: true,
      },
    },
    direction: 'diagonal',
  });
};

使用

.getBoundingClientRect()

的解决方案：

const main = document.querySelector('main');
const rect = main.getBoundingClientRect();
const canvas = document.getElementById('granim-canvas');

canvas.style.top = `${rect.top}px`;

Answer 1

将包装器 div 设置为相对允许将内部 h1 设置为绝对，并将顶部 0 设置为包装器 div 的顶部，而不是页面。

.wrapper {
  position: relative;
}

.wrapper>h1 {
 position: absolute; 
 top: 0;
}

或者，您可以将包装器设为

display: grid

，然后使用

grid-row

和

grid-column

将文本和画布设置为在网格中的同一点开始和结束，从而使它们重叠。

.wrapper {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

.wrapper>.granim-wrapper {
  grid-row: 1;
  grid-column: 1; 
}

.wrapper>h1 {
  grid-row: 1;
  grid-column: 1; 
}