用Canvas逐帧渲染Bad Apple!!

12.23更新:新增一个钢琴版本BGM,可以在原版和钢琴版之间任意切换

原来setInterval最多精确到毫秒

有句话怎么说来着?

“有屏幕的地方就有坏苹果”



不知道bad apple的可以先戳:http://www.bilibili.com/video/av706/
总之全世界的爱好者都会想方设法地让她呈现在有屏幕的地方,比如在示波器中、笔记本中、甚至是扫雷和任务管理器中…………:

用Canvas逐帧渲染Bad Apple!!_第1张图片
ba配图.png

进入正题

本篇文章讲解用html的canvas画布,让bad apple逐帧动画在浏览器页面中渲染出来

经过多天断断续续地探索,得到如下成果,先给出下载地址:
http://pan.baidu.com/s/1eSwsdnc

接着咱们讲讲思路:
写代码前,总要先导入素材吧。。Adobe Primirer可以把BAD APPLE视频格式逐帧导出图片,注意图片命名序号最好不要用0去补位:

用Canvas逐帧渲染Bad Apple!!_第2张图片
QQ截图20161221214105.png

对于背景音乐播放速度,我使用音频编辑软件调整到3:35,410抵消setInterval的误差




    
    Bad Apple!!


    
        你的浏览器貌似不支持canvas?太悲剧了,换一个吧
    
    
    
    

附:测试版的代码




    
    
    Document


    
    
    

帧速率

时间

你可能感兴趣的:(用Canvas逐帧渲染Bad Apple!!)