Javascript 使用html画布的可编辑网格

我最近非常惊讶地注意到，在谷歌电子表格的最新迭代中，他们使用

画布

标记来呈现电子表格网格，而在过去，他们使用经过验证的

来呈现网格

在以前的版本中，使用虚拟行技术（类似于在中所做的），在任何一个时间点仅渲染一小部分实际行。这提供了相当好的性能（slickgrid有一个500000行的演示）

我的问题：

canvas

如何比虚拟DOM元素技术更有效

当以这种方式使用画布时，如何确保画布以与滚动相同的速度渲染，因为与虚拟行技术不同，没有预渲染缓冲区

有没有人知道使用html画布创建可编辑网格的开源示例，或者其他实现类似功能的代码示例

---

谢谢。

我只能肯定地回答您的一个问题：

在画布上画画是一个简单的过程，它只是一个简单的大的旧的彩色比特串。另一方面，DOM元素有更多的东西，如事件处理程序、鼠标交互性等。所有这些总结起来，使DOM元素比仅仅在画布上绘制更重

这方面有很多技术，其中之一是在屏幕外的画布上绘制，然后通过putImageData复制相关部分。这主要与requestAnimationFrame相结合，因此只要浏览器请求，您就可以进行绘制。正如我所说，我不能100%回答这个问题

我很确定现在还没有这样的事情发生，但我不能确定

---

画布在显示电子表格时如何比使用DOM表更有效？

Canvas是一个只写元素，因此它的开销比读写元素小得多。在画布上绘制电子表格的可见部分后，画布不会“记住”将像素放置在何处

画布是否能够跟上电子表格导航（滚动等）

通过创建一个非常大的canvas元素并将canvas包装在一个较小的div元素中，并将div设置为overflow:scroll，可以显示带有滚动条的大型电子表格

此外，Canvas速度非常快，可以滚动并重新绘制动态创建的电子表格。画布实际上是本机双缓冲的，并且还使用任何可用的GPU来加速绘图。如果需要更高的速度，您可以通过编程方式创建额外的“仅内存”画布，这些画布可以根据需要快速绘制到屏幕画布上

您知道任何基于画布的可编辑电子表格。

不，我不知道

画布是只写的。画布电子表格只有经过大量编程工作才能变得可编辑。所以canvas可能是错误的编辑工具

---

咯咯笑……好像我在打字的时候亚历山大·克鲁特也做出了类似的反应——他说的也是

仅供参考，Google Docs/Drive电子表格使用画布作为主要的电子表格/表格显示。

回答您的问题3：有人知道使用html画布创建可编辑网格的开源示例，或者任何其他实现类似功能的代码示例吗？

是：Hypergrid。它是开源的。它使用画布和图形。看看：

---

对于正在寻找另一种与Hypergrid非常类似的易于使用的替代方案的用户，请查看：

它只需几行代码即可使用：

var container = document.getElementById('container')
var dataGrid = canvasDatagrid({
  parentNode: container
})

dataGrid.data = [
  {col1: 'row 1 column 1', col2: 'row 1 column 2', col3: 'row 1 column 3'},
  {col1: 'row 2 column 1', col2: 'row 2 column 2', col3: 'row 2 column 3'}
]

---

谢谢正如您所说，要使画布完全交互式和可编辑，需要大量的工作。对于这种规模的东西来说，这不是一个明显的选择。但我想，同样的简单性让它变得如此之快。我想知道，在不久的将来，我们是否会看到更多基于画布的“假”DOM UI。原生画布UX越来越受欢迎，因为它从Flash（r.I.p Flash）获得了市场份额。但是，基于画布的文本输入可能不会取代DOM文本输入。干杯OP的第一句话是“我注意到在谷歌电子表格的最新迭代中，他们使用画布标签呈现电子表格网格”。截至2015年7月，有一个开源示例。请看下面我的答案。只是一个附言。-我最终（6月14日）创建了自己的非常简单的[封闭源代码：（]只读网格，具有排序和拖放功能。我之所以提到它，是因为它不难做到。它有固定的行高-所以我只做了一个全高的空div来获得滚动条。我听了一个（限制的）每次滚动事件并根据要显示的行的计算重新创建画布。绘制画布非常快，请检查哇！该演示非常出色。突破了人们认为可能的界限。感谢添加链接。