簡介
最近在做大作業的時候需要做一個彈幕播放器。借鑒了一下別人的源碼自己重新實現了一個，演示如下
主要的功能有
發送彈幕
設置彈幕的顏色，速度和類型
顯示彈幕
已知缺陷：
不能全屏
canvas沒有做自適應
沒有自定義播放器控件
沒有根據播放時間顯示相應的彈幕
彈幕不能實現懸停
已知的缺陷以后會進行改進。網上能找到的彈幕播放器的源碼一般只做了滾動的彈幕而沒有做靜止的彈幕，這里我特意加上了靜止彈幕的實現。
Canvas繪制文字以及文字滾動效果
整個播放器的核心就是繪制文字以及做文字滾動的動畫，canvas中對于文字并沒有很好的動畫支持，只能通過自己實現，實現的思路就是不斷的清屏然后重寫文字，當清屏重寫的頻率達到24fps的時候就是流暢的動畫了。
先在HTML文件中添加視頻video標簽和畫布canvas標簽
<div id="barrageplayer">
<canvas id="cv_video" width="900px" height="450px"></canvas>
<video id="v_video" src="test.MP4" controls type="video/mp4"></video>
</div>
把canvas標簽的位置樣式設置為position:absolute然后視頻和畫布就重疊在一起，看起來就是一個彈幕播放器了。然后為畫布添加彈幕相關的內容，首先獲取畫布的相關信息和設置畫布的字體大小和字體樣式
var c=document.getElementById("cv_video");
//獲取畫布大小
var c_height=c.height;
var c_width=c.width;
//獲取畫布
ctx=c.getContext("2d");
//設置字體樣式
ctx.font="25px DengXian";
畫布信息已經獲取和設置，巧婦難為無米之炊，接著我們就要構造彈幕對象，使用的構造模式是動態原型模式
//彈幕對象
function Barrage(content,color,type,speed){
this.content=content;
this.color=color;
this.type=type;
this.speed=speed;
if(this.type=="default"){
this.height=parseInt(Math.random()*c_height)+10;
}else if (this.type=="static top"){
this.height=parseInt((c_height/2)-Math.random()*c_height/2)+10;
}else if (this.type=="static bottom"){
this.height=parseInt((c_height/2)+Math.random()*c_height/2)+10;
}
if(typeof this.move!="function"){
Barrage.prototype.move=function(){
if(this.type=="default"){
this.left=this.left-this.speed;
}
}
}
}
構造的彈幕對象初始化了各種參數，包括內容，顏色，運動類型和速度，定義了move()方法來控制彈幕的緩動，每出發一次move()方法向左滾動一個單位speed的像素。
彈幕對象構造完成之后就進入到主題，動畫的制作，直接上代碼
//循環擦寫畫布實現動畫效果
setInterval(function(){
ctx.clearRect(0,0,c_width,c_height);
ctx.save();
for(var i=0;i<msgs.length;i++){
if(msgs[i]!=null){
if(msgs[i].type=="default"){
handleDefault(msgs[i]);
}else{
handleStatic(msgs[i]);
}
}
}
},20)
每20ms執行一次擦寫，ctx.clearRect(0,0,c_width,c_height);是將整張當前的畫布清除，然后使用ctx.save()將當前的畫布保存，接著遍歷彈幕列表(msgs是彈幕列表，當每發送一條彈幕都會將該彈幕實例添加到列表中)，然后按照默認樣式的彈幕還是靜止樣式的彈幕分別處理。如果是默認樣式的彈幕將會按照以下的方法處理
//處理默認彈幕樣式
function handleDefault(barrage){
if(barrage.left==undefined||barrage.left==null){
barrage.left=c.width;
}else{
if(barrage.left<-200){
barrage=null;
}else{
barrage.move()
ctx.fillStyle=barrage.color;
ctx.fillText(barrage.content,barrage.left,barrage.height)
ctx.restore();
}
}
}
首先如果彈幕實例沒有設置left屬性則將畫布的寬度賦予它，如果彈幕實例已經退出畫布則將其置null以節省內存，否則的話就調用彈幕實例的move()方法改變left屬性的值，然后設置文字的顏色，一級寫入新的文字，恢復畫布。這樣就完成了一幀動畫。