canvas文本抖动的问题

Question

我使用ctx.fillText绘制一行文本，然后动态地改变该文本的在画布中的x和y值，使它做圆周运动，发现文本在过度中出现抖动的现象，整个效果不太理想，请问这是什么原因造成的？如何解决？

Answer 1

实现Canvas动画时在下一帧渲染前设置屏幕内容，重绘图像以实现动画效果。Canvas动画的实现有点儿像“翻页动画”，在绘本上的每页绘制不同图像，快速翻过时每一帧都连续起来，看上去像动画片。因此对于Canvas来说，如果“浏览器翻页不够快”或者“浏览器播放Canvas不够平滑”，就会出现跳帧的情况，让用户感觉卡壳。

PO主没说用啥设备；所以PO主也是测一下设备的Canvas的绘制帧率吧；也许你的浏览器没开硬件加速呢；创建一个只有两帧的动画，让浏览器在10秒钟的时间内尽可能绘制，最后计算每秒平均执行的动画帧数。平均帧数越高，则证明浏览器播放Canvas动画的平滑程度越好。