如何将滚动条添加到HTML5画布中的矩形？

Question

是否有标准方法将滚动条添加到HTML5画布中的矩形？我想在一个矩形中添加一个垂直滚动条，该矩形包含一个比画布长的项目列表。有没有图书馆做这种事情？或者，这是我必须为自己弄清楚的事情。

Answer 1

遗憾的是没有标准方法。 Canvas只是表示一个位图（图像）。只有像素，外面绘制的所有内容都会被剪裁。

要添加滚动条，您必须自己创建一个滚动条。一个技巧也是将画布放在div中并使用div的滚动条，但不建议这样做，因为它会消耗更多的内存。

滚动条不是很难创造;查看一些现有代码以了解它们是如何制作的，并尝试将它们用于画布上。你可以通过谷歌轻松找到一些，here is one example（你也可以按原样使用它。）

基本步骤是：

➔计算整页的总任意大小（现在让我们坚持高度）
➔计算画布的实际高度与任意高度之间的比率
➔计算高度作为视口相对于总高度

后者用于在滚动条容器内绘制旋钮。当您移动旋钮时，每个像素代表您在第二步中计算的任意高度的特定大小。

这是基础 - 还有一些其他的东西，例如当arbtrary高度低于实际高度，因此滚动条被隐藏或旋钮填满整个空间时，你必须在计算中减去旋钮的高度，这样你就可以移动它到底部，它将代表任意高度的底部。