javascript - 在整个页面上覆盖 Canvas (不仅仅是窗口)

Question

背景

我们以长页面格式展示一些类(class)，每个部分都是窗口的整个高度...每节类(class)中有许多不同的部分。

我正在尝试做什么 我希望人们能够在整个页面上乱写乱画。正如您所看到的，有一些用于突出显示和删除 Canvas 内容的选项。

这里的目标是让 Canvas 覆盖整个页面，以便用户可以在任何地方绘图。

我尝试过的

我已将 position:absolute 添加到我的 Canvas (#theCanvas) 中，并将 Canvas 放在我的内容之上，但是当我向下滚动时，我无法在任何内容上绘制在初始窗口视口(viewport)下。

我的代码

标记

<canvas id="theCanvas"></canvas>

<div class="right-menu">

    <div class="right-menu-section">
        <div class="right-menu-section-circle">
            <svg height="32" width="32">
                <circle cx="16" cy="16" r="16" fill="#eeeeee">
            </svg>
        </div>
        <div class="right-menu-section-circle">
            <svg height="16" width="16">
                <circle cx="8" cy="8" r="8" fill="#eeeeee">
            </svg>
        </div>
        <div class="right-menu-section-circle">
            <svg height="8" width="8">
                <circle cx="4" cy="4" r="4" fill="#eeeeee">
            </svg>
        </div>
    </div>

    <div class="right-menu-section">
        <div class="right-menu-section-icon">
            <i class="fa fa-eraser" aria-hidden="true"></i>
        </div>
        <div class="right-menu-section-icon">
            <i class="fa fa-pencil" aria-hidden="true"></i>
        </div>
        <div class="right-menu-section-icon">
            <i class="fa fa-hand-pointer-o" aria-hidden="true"></i>
        </div>
    </div>

    <div class="right-menu-section">
        <div id="colors"></div>
    </div>

    <div class="right-menu-section">
        <div class="right-menu-section-icon">
            <i class="fa fa-hand-paper-o" aria-hidden="true"></i>
        </div>
    </div>

</div>

<div class="" style="display:block;position:absolute;float:right;margin-left:40px;margin-top:20px">
    <h4>Estimated Time to complete:<h4>
    <h2>
        <i class="fa fa-clock-o"></i>
        25m
    </h2>
</div>

<!-- intro -->
<div class="container-fluid card" style="background:#e8e6e1">
    <div class="container card-content">
        <h1 class="text-center">Welcome...</h1>
        <h4 class="text-center">
            Today's Lesson Focus:
            <?php echo $focus->lesson_focus; ?>
        </h4>
        <p class="text-center"><b>Details:</b> <?php echo $focus->details; ?></p>
    </div>
</div>
<!-- end intro -->

<!-- lesson -->
<?php foreach ($cards as $card) : ?>
<div class="container-fluid card" style="background:#eaeaec">
    <div class="container card-content">
        <div class="col-md-6">
            <h2>
                <?php echo $card->card_title; ?>
                <i class="fa fa-volume-up"></i>
            </h2>
            <p><?php echo $card->card_content; ?></p>
        </div>
        <div class="col-md-6">
            <img src="<?php echo $card->card_file_path; ?>" alt="">
        </div>
    </div>
</div>
<?php endforeach; ?>
<!-- end lesson -->

<!-- outtro -->
<div class="container-fluid card" style="background:#E7E1E8">
    <h1 class="text-center">Thanks!</h1>
</div>
<!-- end outtro -->

CSS

.card {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right:50px;
    }

    .card-content {

    }

    .card-content img {
        width:100% !important;
        -webkit-box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75);
        box-shadow: 0px 0px 71px -11px rgba(0,0,0,0.75);
        border-radius: 20px;
    }

    .right-menu {
        position:fixed;
        float:right;
        height:100vh;
        right: 0;
        top: 0;
        width:50px;
        background:#222222;
        -webkit-box-shadow: -4px 0px 10px 0px rgba(153,153,153,1);
        -moz-box-shadow: -4px 0px 10px 0px rgba(153,153,153,1);
        box-shadow: -4px 0px 10px 0px rgba(153,153,153,1);
        border-top:1px solid #444444;
    }

    .right-menu-section {
        border-top:1px solid #444444;
        padding-top:20px;
        padding-bottom:20px;
    }

    .right-menu-section-icon {
        color: #eeeeee;
        margin-top:10px;
        font-size:24px;
        display:block;
        text-align:center;
    }

    .right-menu-section-circle {
        color: #eeeeee;
        margin-top:10px;
        display:block;
        text-align:center;
    }

    .swatch {
        width:30px;
        height:30px;
        border-radius:15px;
        box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.5), 0px 2px 2px rgba(0, 0, 0, 0.5);
        display: block;
        margin-top: 10px;
        margin-left:10px;
    }

    #theCanvas {
        position: absolute;
    }

我的问题

如何让 Canvas 覆盖整个页面而不仅仅是窗口。

Answer 1

将此 CSS 用于 Canvas :

#theCanvas{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

具有固定位置的元素保持在相同的位置，相对于视口(viewport)的上/右/下/左值给出，因此即使当您滚动时它也会散布在整个页面上。