将大型矩阵渲染到画布元素的最流畅方法

Question

我在canvas 元素上创建了一个点阵滑块（很像您在证券交易所获得的那种）。目前，我将每个字母排列为一个单独的矩阵，然后通过一系列循环将这些字母转换为一个大矩阵。

然后，我逐列绘制此矩阵，直至达到最大列数。然后矩阵每 X 毫秒重新绘制一次，每次迭代将矩阵的可视区域偏移一个，直到它最终循环。大矩阵不会每次都重绘。

我的问题是动画在较低的重绘间隔时看起来并不流畅 - 它会跳来跳去。我检查了帧率，看起来不错，但偶尔会跳，我不知道为什么！

带有设置的功能就在JSFiddle的底部。

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

Answer 1

您可以执行以下步骤：

• 在透明背景上以纯色将每个字符预渲染到屏幕外画布。此画布稍后将用作精灵表。绘制圆角矩形是一项相对昂贵的操作，尤其是当您需要每个字符 x 个圆角矩形时。

• 为颜色设置渐变并将其存储在屏幕外画布中（现在我们可以看到内存缓存正在发挥作用..）。

• 每次更新时使用 requestAnimationFrame 而不是 setInterval。后者无法同步监控更新。可以使用经过的帧数以及自上次更新以来的时间来计算滚动延迟（有关详细信息，请参阅rAF doc）。

• 对于每次更新清除，然后将字母从精灵表画布“blit”到主画布。当所有都被 blitted 时，将复合模式更改为 source-atop 并将渐变画布 blit 在顶部，并将复合模式重置为 source-over（不要使用保存/恢复 - 它们很昂贵）。

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

希望这能为您提供一些改进性能的意见。