Question

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

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

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

Answer 1

经过快速测试后，我不确定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"/>

使用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以及你将挂钩onscroll甚至是监听器的假冒滚动条。每次用户更改位置时，再次调用drawImage，更新x / y位置（在我的示例中为40和50）。

再说一遍，即使隐藏起来，我也怀疑浏览器是否可以使用大画布。

我正在寻找同一问题的解决方案，所以如果在你的研究中你很幸运，请分享。

Answer 2

有趣的问题。我没有非常使用<canvas>，但我相信<canvas>的内部最好被认为是一个图像，即就DOM而言，它是一个黑盒子。

因此，我认为你不能以你想象的方式滚动它。如果您有128000×128000 <canvas>，则可以将其放在<div>内。 1280×1280并将<div>设置为overflow:hidden，但正如您所说，128000×128000 <canvas>是不切实际的。

我想你正在寻找的那种解决方案将提供一个虚拟的128000×128000画布界面，然后将其拆分成块，提供一个滚动界面，并在滚动到视图中时绘制每个块。 / p>

Answer 3

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

在html5画布上自定义滚动

3 个答案: