無法使用<canvas>里面的元素<div>元素</div><div id="text_translate"><p>我無法在 &lt;div&gt; 元素中添加 &lt;canvas&gt; animation 。 使用當前代碼，animation 占據整頁，我想將 &lt;canvas&gt; 封裝在 &lt;div&gt; 中，以便 animation 進入單個部分。 類似於 &lt;div&gt;&lt;canvas&gt; &lt;/canvas&gt;&lt;/div&gt;</p><pre> HTML: &lt;canvas&gt;&lt;/canvas&gt; &lt;h2&gt;hi&lt;/h2&gt;</pre><pre> CSS: * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; font-family: 'Poppins', sans-serif; background-color: #121212; display: flex; align-items: center; justify-content: center; } canvas { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 0; } h2 { font-size: 80px; color: white; position: relative; }</pre></div></canvas>

Question

我無法在 <div> 元素中添加 <canvas> animation 。 使用當前代碼，animation 占據整頁，我想將 <canvas> 封裝在 <div> 中，以便 animation 進入單個部分。 類似於 <div><canvas> </canvas></div>

HTML:
<canvas></canvas>
<h2>hi</h2>

CSS:
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
    background-color: #121212;
    display: flex;
    align-items: center;
    justify-content: center;
}

canvas {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

h2 {
    font-size: 80px;
    color: white;
    position: relative;
  
}

Answer 1

將position:relative div 包裹在 canvas 周圍。 使 canvas 不fixed ，而是absolute以 div 框架作為參考。

 * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; font-family: 'Poppins', sans-serif; background-color: #121212; display: flex; align-items: center; justify-content: center; } canvas { width: 100%; height: 100%; position: absolute; background: rgba(255, 0, 0, 0.3); top: 0; left: 0; z-index: 0; } h2 { font-size: 80px; color: white; position: relative; }.my-canvas { position: relative; width: 500px; height: 200px; border: 1px solid red; }

 <div class="my-canvas"> <canvas></canvas> <h2>hi</h2> </div>