javascript - html5画布上的自定义滚动

Question

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

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

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

Answer 1

经过快速测试，我不确定 Chrome 或 Firefox 是否会渲染那么大的画布。我的赌注是创建一个画布元素，但从不将其附加到 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"/>

并使用 drawImage 方法绘制部分：

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);

然后由您决定是否提供向上/向下/向右/向左按钮进行导航，或者使用 20px 宽的 DIV 来伪造滚动条，该 DIV 只会显示滚动条，并且您可以在其上挂上一个 onscroll 甚至监听器。每次用户改变位置时，再次调用 drawImage，更新 x/y 位置（在我的示例中为 40 和 50）。

话虽如此，即使在隐藏的情况下，我也怀疑浏览器是否可以与这么大的画布一起使用。

我碰巧正在寻找相同问题的解决方案，所以如果在您的研究中幸运的话，请分享。

Answer 2

Interesting question. I haven’t used <canvas> very much, but I believe the inside of the <canvas> is best thought of like an image, i.e. it’s a black box as far as the DOM is concerned.

As such, I don’t think you can really scroll it in the way that you’re imagining. If you had a 128000×128000 <canvas>, you could put it inside a <div> that’s e.g. 1280×1280 and set that <div> to overflow:hidden, but as you say, a 128000×128000 <canvas> is impractical.

I guess the kind of solution you’re looking for would provide a virtual 128000×128000 canvas interface, but then split it up into chunks, provide a scroll interface, and draw in each chunk as it was scrolled into view.

Answer 3

jCanvas是一个可以帮助你的 jQuery 插件。