如何在画布中插入scrollview容器？

Question

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

我想过使用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;
}