首页 > canvas文本抖动的问题

canvas文本抖动的问题

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


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

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