如何在 canvas 以下形成表格

Question

我正在尝试将表格放在红色 canvas 下方。 https://imgur.com/a/5dwPgeP 显示当前发生的情况。我尝试了不同的 Div 并将它们放在不同的代码部分，但似乎没有任何效果。请帮助我谢谢。代码：

<!DOCTYPE html>
<html>
<head>


    <link rel="stylesheet" type="text/css" href="WEBSITE.css">
    <!-- Load the Paper.js library -->

    <script type="text/javascript" src="node_modules/paper/dist/docs/assets/js/paper.js"></script>


</head>
<body>
    <div>
        <script src="displayTable.js"></script>
        <canvas id="mycanvas" resize></canvas>
    </div>

    <div>
        <label for="backgroundTable">Color for background of table:</label>
        <form action="website.php" method="post">
            <div class="form">
                <select name="userBackgroundSelect" id="userBackgroundSelect">
                    <option value="black">Black</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="purple">Purple</option>
                </select>
            </div>
            <div>
                <input type="submit">
            </div>
        </form>
    </div>
</body>
</html>

和css：


html,
body {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
}

感谢任何帮助，我认为使用容器或其他东西会有所帮助。

Answer 1

根据我的理解，你希望表格低于我的评估 canvas.According，你的 canvas 被定位为 fixed meaning is positioned relative to the viewport(device)，这意味着它即使页面滚动，也总是停留在同一个地方尝试以下解决方案：

body {
    margin: 0;
  
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 50vh;
    background-color: red;
  
}

   <div>
        <script src="displayTable.js"></script>
        <canvas id="mycanvas" resize></canvas>
    </div>

    <div>
        <label for="backgroundTable">Color for background of table:</label>
        <form action="website.php" method="post">
            <div class="form">
                <select name="userBackgroundSelect" id="userBackgroundSelect">
                    <option value="black">Black</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="purple">Purple</option>
                </select>
            </div>
            <div>
                <input type="submit">
            </div>
        </form>
    </div>

如何在 canvas 以下形成表格

How to have form below canvas

html

css

paperjs