Question

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

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

我的问题是动画在较低的重绘间隔时看起来并不平滑 - 它会跳跃。我已经检查了帧速率，看起来很好，但偶尔跳转，我无法解决原因！

带有设置的功能位于JSFiddle。

的底部

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

Answer 1

您可以执行以下步骤：

将每个字符预渲染到透明背景上的纯色离屏画布上。此画布稍后将用作精灵表。绘制圆角矩形是一项相对昂贵的操作，尤其是当您需要每个字符的x个数时。
为颜色设置渐变并将其存储在离屏画布中（现在我们可以看到内存缓存正在拯救......）。
每次更新时都使用requestAnimationFrame而不是setInterval。后者无法同步监控更新。可以使用经过的帧数以及自上次更新以来的时间计算滚动延迟（有关详细信息，请参阅rAF doc）。
对于每次更新清除，然后＆＃34; blit＆＃34;从精灵表画布到主画布的字母。当所有都是blitted时，将复合模式更改为source-atop并将渐变画布放在顶部，并将复合模式重置为source-over（不要使用保存/恢复 - 它们很贵）。

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

希望这能为您提供一些改善绩效的投入。