用Canvas逐帧渲染Bad Apple!!
2016-12-18 本文已影响85人
Kagashino
12.23更新：新增一个钢琴版本BGM，可以在原版和钢琴版之间任意切换
原来setInterval最多精确到毫秒
有句话怎么说来着？
“有屏幕的地方就有坏苹果”
<br />
不知道bad apple的可以先戳：http://www.bilibili.com/video/av706/
总之全世界的爱好者都会想方设法地让她呈现在有屏幕的地方，比如在示波器中、笔记本中、甚至是扫雷和任务管理器中…………：
ba配图.png
进入正题
本篇文章讲解用html的canvas画布，让bad apple逐帧动画在浏览器页面中渲染出来
经过多天断断续续地探索，得到如下成果，先给出下载地址：
http://pan.baidu.com/s/1eSwsdnc
接着咱们讲讲思路：
写代码前，总要先导入素材吧。。Adobe Primirer可以把BAD APPLE视频格式逐帧导出图片，<strong>注意图片命名序号最好不要用0去补位：</strong>
QQ截图20161221214105.png
对于背景音乐播放速度，我使用音频编辑软件调整到3:35,410抵消setInterval的误差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bad Apple!!</title>
</head>
<body>
<canvas id="cvs1" width="600" height="480" style="background:lime">
你的浏览器貌似不支持canvas?太悲剧了，换一个吧
</canvas>
<audio id="origin" src="origin.mp3">
你的浏览器竟然连声音标签都不支持！！！无语了，求你 换一个吧T T
</audio>
<audio id="piano" src="baPianoVer.mp3">
你的浏览器竟然连声音标签都不支持！！！无语了，求你 换一个吧T T
</audio>
<br />
<button onclick="playAnimate()">播放</button>
<button onclick="pauseAnimate()">暂停/继续</button>
<label><input type="radio" name="track" onchange="swapTrack()" checked>使用原版音轨</label>
<label><input type="radio" onchange="swapTrack()" name="track">使用钢琴版音轨</label>
<p id="msg"></p>
</body>
<script>
var input = document.querySelector('input');
var track1 = document.getElementById('origin');
var track2 = document.getElementById('piano');
var ctx = document.getElementById('cvs1').getContext('2d');
var frame = new Image();
frame.src = "frame/ba0.jpg";
renderToCanvas();//渲染第0帧
var speed = 41;//严格来说是1000/23.976,然而只能取整数毫秒
var timer = null;
swapTrack();//默认使用原版
//音轨切换
function swapTrack(){
track1.volume = input.checked?1:0;
track2.volume = input.checked?0:1;
document.getElementById('msg').innerHTML = input.checked?"当前音轨：原版":"当前音轨：钢琴版";
}
//播放动画
function playAnimate(){
var i = 1;
if(track1.paused){
track1.play();
track2.play();
}
if(!timer){
timer = setInterval(function() {
frame.src = "frame/ba"+i+".jpg";
renderToCanvas();//逐帧渲染
!track1.paused && i++;
if(i>=5248){
clearInterval(timer);
timer = null;
}
},speed);}
}
//渲染图片到画布
function renderToCanvas(){
frame.onload = function(){
var frm = ctx.createPattern(frame,"no-repeat");
ctx.fillStyle = frm;
ctx.fillRect(0,0,600,480);
}
}
//播放和暂停的切换
function pauseAnimate(){
if(track1.paused){
track1.play();
track2.play();
} else {
track1.pause();
track2.pause();
}
}
</script>
</html>
附：测试版的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#time{
border:solid;
}
</style>
<title>Document</title>
</head>
<body>
<canvas id="cvs1" width="600" height="480" style="background:lime"></canvas>
<audio id="bgm" src="bgm.mp3"></audio>
<p id="time"></p>
<p id="whichframe"></p>
<p>帧速率<span id="fps"></span></p>
<p>时间<span id="getSpeed"></span></p>
<button onclick="playAnimate()">播放</button>
<button onclick="pauseAnimate()">暂停/继续</button>
</body>
<script>
window.onload = function(){
playAnimate();
}
var cvs = document.getElementById('cvs1');
var bgm = document.getElementById('bgm');
var ctx = cvs.getContext('2d');
var frame = new Image();
//即时数据
var timeTag = document.getElementById('time');
var whichframe = document.getElementById('whichframe');
var startTime = new Date();
var fps = document.getElementById('fps');
var getSpeed = document.getElementById('getSpeed');
var speed = 1000/23.976;
var duration = [];
var timer = null;
function renderToCanvas(){
frame.onload = function(){
var frm = ctx.createPattern(frame,"no-repeat");
ctx.fillStyle = frm;
ctx.fillRect(0,0,600,480);
}
}
function playAnimate(){
var i = 0;
bgm.play();
timer = setInterval(function() {
frame.src = "frame/ba"+i+".png";//导入
renderToCanvas();//渲染到画布
if(!bgm.paused){
var loopTime = new Date();
getDuration(loopTime);
time.innerHTML = loopTime - startTime;//流逝时间（ms）
whichframe.innerHTML = frame.src;//当前渲染文件
fps.innerHTML = (i/(loopTime - startTime)*1000)//.toFixed(3);//帧速率
i++;
}
if(i>=5248){
clearInterval(timer);
timer = null;
}
},speed);
}
//计算setInterval实际循环时间
function getDuration(t){
duration.push(t);
if(duration.length>2)
duration.shift();
getSpeed.innerHTML = (duration[1]-duration[0]).toFixed(5);
}
function pauseAnimate(){//播放暂停切换
if(bgm.paused){
bgm.play();
}
else{
bgm.pause();
}
}
</script>
</html>
