如何在HTML5畫布的矩形中添加滾動條？

Question

有沒有將滾動條添加到HTML5畫布中的矩形的標准方法？ 我想將垂直滾動條添加到包含比畫布長的項目列表的矩形中。 有沒有可以做這種事情的圖書館？ 或者，這是我必須自己解決的問題。

Answer 1

不幸的是，沒有標准的方法。 畫布僅代表位圖（圖像）。 只有像素，所有在外部繪制的內容都將被剪切。

要添加滾動條，您必須自己創建一個。 還有一個技巧是將畫布放在div內並使用div的滾動條，但是不建議這樣做，因為它會消耗更多的內存。

滾動條並不難創建； 查看一些現有代碼，看看它們是如何制成的，並嘗試采用它們以在畫布上使用。 您可以通過google輕松找到它們， 這是一個示例 （您也可以原樣使用）。

基本步驟是：

➔計算整個頁面的任意大小（暫時保持高度）
➔計算畫布的實際高度與任意高度之間的比率
計算相對於總高度的視口高度

后者用於在滾動條容器內繪制旋鈕。 當您移動旋鈕時，每個像素代表您在第二步中計算出的任意高度的特定大小。

這是基礎-還有其他一些事情，例如當書架高度小於實際高度時，如果滾動條被隱藏或旋鈕填充整個空間，則必須在計算中減去旋鈕的高度，以便將其移至底部，它將代表任意高度的底部。