比♂利比♂利

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用于预渲染，超出则等待下一帧

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks: 

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax