javascript - 在 html5 Canvas 上自定义滚动

Question

为 hmtl5 Canvas 中显示的超大数据提供滚动条和 native 滚动条的推荐方法是什么？

我需要显示 128000x128000 像素的数据。使用宽度/高度设置为 128000 的 Canvas 不是一种选择，因为这会使用大量 RAM(根据我的快速计算，大约 61 GB)。

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

Answer 1

经过快速测试后，我不确定 Chrome 或 Firefox 能否渲染这么大的 Canvas 。我的赌注是创建一个 Canvas 元素，但绝不会将其附加到 DOM。就像这样:

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

然后创建一个较小的 Canvas ，它实际上会显示您隐藏的 Canvas 的一部分

<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 只会显示滚动条并且您可以在其上 Hook onscroll 甚至监听器。每次用户改变位置时，再次调用 drawImage，更新 x/y 位置(在我的示例中为 40 和 50)。

话虽如此，但即使隐藏起来，我也怀疑浏览器能否使用这么大的 Canvas 。

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