我需要显示一个很长的区域(没有定义的长度)和许多多边形(简单的形状——圆形、正方形、一些文本)。显然我一次只需要可见的小片段。主要问题是高效的滚动和处理鼠标事件。我用 GWT 编写。到目前为止我考虑的事情:
1) Canvas 。创建具有可见区域大小的 Canvas 。创建大于可见区域的缓冲区 Canvas 。渲染到缓冲区(仅更改 - 如果在滚动过程中可见区域中的某些内容发生更改或向右/向左移动新部分)。并在需要时将缓冲区的适当部分渲染到可见 Canvas 。这似乎工作得足够快。但!我必须实现这个智能缓冲，决定哪些部分需要重新渲染，哪些不需要。而且我需要记住所有对象来检测鼠标点击和鼠标悬停(它应该是一些不错的结构，如间隔树或线段树，因为鼠标悬停检查非常频繁 - 但这已经在浏览器中实现，听起来像是重新发明轮子) - 这是大量工作! 也许有什么东西准备好了？
2) html (divs/images) - 因此，想法是用 div 和图像渲染所有元素(图像可以先在 Canvas 上生成，不符合要求)。将它们绝对定位在一个长的 div 上，并使用浏览器滚动来滚动 div。一直工作到你到达这个长 div 的末尾并且你需要重新定位所有内容以便有更多空间滚动(这会卡住滚动一段时间)。因此，也许可以同时在第二个 div 中呈现，然后切换它们。它可能会工作，但这听起来像是 hack，并且一次可见多个对象可能会出现严重问题。加上在浏览器中实现的鼠标事件。
3) SVG - 我没试过，但我想我会遇到与 html/divs 相同的性能问题(当向右/向左滚动时)
有什么想法吗？哪种方法最好？有更好的吗？ WebGL(它不能在 IE 中运行，并且很难移植到 IE 中)。我应该如何实现？
最佳答案
您似乎了解利弊。 Canvas 速度更快，但级别较低，因此更难编码。由于 DOM 的事件处理和对象访问，它的编码速度较慢但更容易编写。如果 DOM 太慢，你必须求助于 Canvas 。
一种可能的折衷方案是渲染整个 Canvas 并使用 overflow:hidden 对其进行剪辑。这就是我在我正在处理的波形显示上所做的。
对于形状，SVG 应该比 DOM 更容易。由于 SVG 不完全跨浏览器，您应该使用类似 http://raphaeljs.com/ 的东西
关于javascript - 要在很长的区域、 Canvas 上渲染多个对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7828340/