用于处理可视化的HTML5 Canvas优化

Question

我写了一个processing.js可视化，用于将成对信息显示为三角图/热图。

这是一个有效的jsfiddle版本：http://jsfiddle.net/timeu/uK6SB/

性能有点好，但我认为可能还有一些改进空间。

基本上在上面的示例中，我将691个成对信息（477481浮点值介于0和1之间）显示为热图。
因为我只对某个范围感兴趣，所以我只对高于某个阈值的值进行颜色编码（在我的情况下为0.3） 过滤后，我最终得到大约10 000个浮点值，我必须显示彩色矩形 当用户将鼠标移动到数据点上时，它将使所有值变灰并仅突出显示所选值，并在左侧的缩放器中显示成对值。

使用以下步骤创建绘图：

1. 创建一个蓝色背景的矩形（对于低于阈值的所有值）
2. 为超过阈值（约10.000）的所有值创建彩色矩形
3. 旋转并平移屏幕以创建三角效果

当用户将鼠标移动到数据点上方时，它会按照以上步骤执行以下步骤：

1. 在整个绘图上绘制一个半透明的灰色矩形（灰化所有其他值）
2. 重绘数据点

在我的第一个天真的方法中，当我更改突出显示的数据点时，我重绘整个图。 但表现真的很糟糕。在剖析后，我发现重绘10.000个矩形是瓶颈 为了解决这个问题，我将初始绘图绘制到后备缓冲区中（在processing.js中可以使用PImage），然后在需要更新绘图时重新绘制后备缓冲区。这显着改善了性能。

然而，当我以非常高的分辨率（2000像素以上）显示绘图时，性能会下降很多。在剖析后，我发现toImageData（重新绘制后备缓冲区）占用了大部分时间 我做了一些关于如何提高画布性能的研究（html5rocks，msdn，stackoverflow）

所以我提出了以下可能的改进：

• 由于我只显示最多500个点（ - > 250.000浮点值），我可以用500x500像素的分辨率渲染我的绘图，然后使用硬件升级升级到原始分辨率。
• 我通过将画布的宽度除以点数来计算矩形的大小。大多数情况下，我最终会遇到浮点坐标，导致子像素渲染和性能不佳。但是舍入不是一个选项，因为我需要耗尽所有可用空间（如果我向上舍入，我将看不到完整的绘图，如果我放置坐标，则绘图不会覆盖整个画布）。有解决方案吗？
• 当我突出显示不同的数据点时，我可以某种方式使用 clearRect 并重新绘制已更改的部分，而不是重新绘制整个后备缓冲区。不知道如何才能做到这一点很难。

我会感谢任何反馈或其他表现建议。