Javascript html5画布上的自定义滚动

为hmtl5画布中显示的超大数据提供滚动条和本机滚动条的推荐方式是什么

我需要显示128000x128000像素的数据。使用宽度/高度设置为128000的画布不是一个选项，因为这将使用大量RAM（根据我的快速计算，大约61 GB）

---

因此，我需要一种为HTML5画布提供自定义滚动条的方法。

是一个jQuery插件，可以帮助您。

有趣的问题。我没有经常使用

，但我相信

的内部最好像一个图像一样，也就是说，就DOM而言，它是一个黑盒子

因此，我不认为你真的可以按照你想象的方式滚动它。如果你有一个128000×128000的

，你可以把它放在一个

中，例如1280×1280，然后将

设置为

溢出：隐藏
，但是正如你所说的，128000×128000
是不切实际的

我猜您正在寻找的解决方案将提供一个虚拟的128000×128000画布界面，但随后将其分为多个块，提供一个滚动界面，并在滚动到视图中时绘制每个块。
经过快速测试，我不确定Chrome或Firefox是否会呈现这么大的画布。
我打赌会创建一个canvas元素，但决不会将其附加到DOM中。就这样,

var hiddenCanvas = document.createElement('canvas');
hiddenCanvas.width = 128000;
hiddenCanvas.height = 128000;
var hiddenContext = hiddenCanvas.getContext('2d');

然后创建一个较小的画布，实际显示隐藏画布的一部分

<canvas width="something reasonable" height="something reasonable" id="viewCanvas"/>

然后，您可以提供上/下/右/左按钮来导航，也可以使用20px宽的div来伪造滚动条，该div只显示滚动条，您可以将onscroll甚至监听器挂在其上。
每次用户改变位置时，再次调用drawImage，更新x/y位置（在我的示例中为40和50）

话虽如此，我还是怀疑浏览器是否能在这么大的画布上工作

我正好在寻找解决同一问题的方法，所以如果你在研究中运气好，请分享。
好吧，如果画布上画的是滚动条，那么它就不是本地的。您想要实现什么？我基本上是在寻找一种显示本地滚动条的方法，以便从中捕获滚动事件。：）谢谢你的建议，不幸的是，我在jCanvas中找不到对它的任何本地支持，但它确实有一些其他非常好的东西。受谷歌地图操作方式的启发，我最终做了一个缩放的事情。希望我能帮助你。考虑一下投票，接受我的答案，让别人知道我的答案对你有帮助。我用变焦函数解决了我的问题。将宽度和高度设置为100%，然后使用鼠标进行放大/缩小和拖动。不过，它确实给应用程序/用户体验增加了一些额外的复杂性。此外，渲染大量数据（即使在较小的画布上）有时也需要一些时间。一个60000x60000块缩小到例如1000x1000画布通常需要2-3秒来绘制。
var viewCanvas = document.getElementById('viewCanvas');
var viewContext = viewCanvas.getContext('2d');
viewCanvasContext.drawImage(hiddenCanvas, 40, 50, viewCanvas.width, viewCanvas.height, 0, 0, viewCanvas.width, viewCanvas.height);