比♂利比♂利 canvas弹幕绘制纪实 2017年3月6日 esterTion 留下评论 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用于预渲染，超出则等待下一帧