canvas弹幕绘制纪实

Day 1 (Mar.4th)

这次改canvas绘制是直接在ccl的基础上添加,出来的成品是准备双模式兼容的

并且,按照一贯canvas绘制习惯,带高dpi优化

初版流程:直接fillText
起初倒是可以,但是在加描边的时候,因为strokeText效果不理想,换shadoeBlur的时候,直接卡飞了,经过google,学到了预渲染的方法可以解决shadow的高性能消耗
改动:使用canvas存储预渲染,此时另一人给我遇到了正反buffer渲染(先离屏渲染再copy防止闪屏)。这一点其实使用requestAnimationFrame的话基本上不会碰到,但我初次理解的时候理解错了,用了setInterval渲染离屏canvas而再rAF copy
在google的时候,看到一条drawImage里,绘制canvas转出来的data url比直接canvas快,于是换用了img存储预渲染

 

Day 2 (Mar.5th)

发觉了对正反buffer的认知错误后,取消了interval,直接在rAF里结尾copy
在尝试的时候,发现初始渲染会“阻塞”浏览器,然后使用了promise进行异步预渲染

 

Day 3 (Mar.6th)

在再一次的性能测试的时候,发现虽然draw data image比canvas快个0.02-0.05ms,但是toDataURL会卡5-30ms…纯属得不偿失。同时也发现promise异步并不能解决卡顿,因为原因是js单线程,而核心正在执行其他任务(toDataURL),所以也就无法高帧渲染。结果去掉了转img的过程,并且考虑到渲染还是要消耗大约2-5ms,所以添加了队列,每16ms(1/60s)中最大只消耗8ms用于预渲染,超出则等待下一帧