我编写了一个processing.js可视化，用于将成对信息显示为三角形图/热图。
这是一个有效的 jsfiddle 版本：http: //jsfiddle.net/timeu/uK6SB/
性能还是不错的，但我认为可能还有一些改进的空间。
基本上，在上面的示例中，我将 691 个成对信息（0 到 1 之间的 477481 个浮点值）显示为热图。
因为我只对某个范围感兴趣，所以我只对高于某个阈值（在我的例子中为 0.3）的颜色编码值。
过滤后，我最终得到大约 10 000 个浮点值，我必须为其显示彩色矩形。
当用户将鼠标移到一个数据点上时，它将使所有值变灰，仅突出显示选定的值，并在左侧的缩放器中显示成对值。
该图是使用以下步骤创建的：
- 创建一个蓝色背景的矩形（对于低于阈值的所有值）
- 为阈值以上的所有值创建彩色矩形（大约 10.000）
- 旋转和平移屏幕以创建三角形效果
当用户将鼠标移动到数据点上方时，除了上述步骤之外，它还会执行以下步骤：
- 在整个绘图上绘制一个半透明的灰色矩形（使所有其他值变灰）
- 重绘数据点
在我的第一个天真的方法中，当我更改突出显示的数据点时，我会重新绘制整个图。但是性能真的很差。分析后我发现重绘 10.000 个矩形是瓶颈。
为了解决这个问题，我将初始绘图一次绘制到后备缓冲区中（在 processing.js 中，可以使用 PImage），然后在需要更新绘图时重新绘制后备缓冲区。这显着提高了性能。
但是，当我以非常高分辨率（超过 2000 像素）显示绘图时，性能会下降很多。分析后我发现toImageData（重新绘制后台缓冲区）需要大部分时间。
我对如何提高画布性能做了一些研究（html5rocks、msdn、stackoverflow）
所以我想出了以下可能的改进：
- 由于我最多只显示 500 个点（-> 250.000 个浮点值），因此我可以只以 500x500 像素的分辨率渲染我的绘图，然后使用硬件放大来放大到原始分辨率。
- 我通过将画布的宽度除以点数来计算矩形的大小。大多数情况下，我最终会得到浮点坐标，这会导致亚像素渲染和性能不佳。但是，舍入不是一种选择，因为我需要用完所有可用空间（如果我四舍五入，我将看不到完整的情节，如果我将坐标放置在坐标上，则情节不会跨越整个画布）。有解决办法吗？
- 当我突出显示不同的数据点时，我可以以某种方式使用clearRect并重绘已更改的部分，而不是重绘整个后缓冲区。不知道这到底是怎么做到的。
对于任何反馈或其他性能建议，我将不胜感激。