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

Question

有没有将滚动条添加到HTML5画布中的矩形的标准方法？ 我想将垂直滚动条添加到包含比画布长的项目列表的矩形中。 有没有可以做这种事情的图书馆？ 或者，这是我必须自己解决的问题。

Answer 1

不幸的是，没有标准的方法。 画布仅代表位图（图像）。 只有像素，所有在外部绘制的内容都将被剪切。

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

滚动条并不难创建； 查看一些现有代码，看看它们是如何制成的，并尝试采用它们以在画布上使用。 您可以通过google轻松找到它们， 这是一个示例 （您也可以原样使用）。

基本步骤是：

➔计算整个页面的任意大小（暂时保持高度）
➔计算画布的实际高度与任意高度之间的比率
计算相对于总高度的视口高度

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

这是基础-还有其他一些事情，例如当书架高度小于实际高度时，如果滚动条被隐藏或旋钮填充整个空间，则必须在计算中减去旋钮的高度，以便将其移至底部，它将代表任意高度的底部。