html - 如何在画布中插入滚动视图容器？

Question

我正在尝试在画布内创建一个滚动视图容器。请注意我不希望整个画布滚动，只有一个子视图，即菜单会在画布上滚动。

我想过使用该canvas.clip()方法创建一个蒙版并根据滚动位置移动底层实体，但该clip()方法隐藏了画布的所有其他实体。有什么方法可以选择将被剪掉的内容？

任何想法如何去做？是否可以？

Answer 1

是的。在原始画布的顶部叠加第二个画布，并使用 CSS z-index 来区分哪一个在另一个之上。然后只需在滚动视图画布上使用剪辑方法。

<div id="container">
    <canvas id="canvas"         width="800" height="500"></canvas>
    <canvas id="scroll-view"    width="800" height="500"></canvas>
</div>

div
{
    position:relative;
    width:800px;
    height:500px;
}
canvas
{
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:800px;
    height:500px;
}
#canvas
{
    z-index:1;
}
#scroll-view
{
    z-index:2;
}