将大型矩阵呈现为画布元素的最平滑方法

Question

我已经在canvas元素上创建了一个点矩阵滑块(很像您在股票交易所得到的排序)。目前，我把每个字母排列成一个单独的矩阵，然后，通过一连串的循环，我把这些字母转换成一个大矩阵。

然后，我遍历并逐列绘制这个矩阵，最多可以得到最多的列数。然后，每隔X毫秒重新绘制矩阵，将矩阵的可视区域每次迭代一次，直到它最终循环为止。大型矩阵不是每次都被重新绘制的。

我的问题是，动画在较低的重绘间隔似乎不光滑-它跳来跳去。我已经检查了帧速率，它似乎很好，但偶尔它跳，我不知道为什么！

带有设置的函数就在JSFiddle的底部。

dotMatrix({
    animationDelay: 1000,
    canvasSelector: '#dot-matrix',
    dotRadius: 2,
    loop: true
});

Answer 1

以下是您可以做的一些步骤：

• 在透明的背景上，将每个字符打印到屏幕外的画布上，颜色为纯色.这张帆布稍后将用作雪碧片.绘制圆角矩形是一种相对昂贵的操作，特别是当您需要每个字符的x数时。
• 为颜色设置一个梯度，并将其存储在屏幕外的画布中(到目前为止，我们可以看到内存缓存正在拯救)。
• 每次更新时都使用requestAnimationFrame而不是setInterval。后者无法同步监视更新。滚动延迟可以使用经过的帧数以及上次更新后的时间来计算(详见rAF文档 )。
• 对于每一个更新清楚，然后"blit“的信从雪碧片帆布到主画布。当所有都被闪现时，将复合模式更改为source-atop，将顶部的渐变画布更改为blit，并将复合模式重置为source-over (不要使用保存/还原--它们很昂贵)。

在最后一步中，您还可以使用复合模式copy，而不是清除画布和使用源-over，因为这将删除以前绘制到的区域的任何现有像素。

希望这给你一些投入，以提高性能。