一、canvas實現彈幕性能較好
從技術實現成本角度講，要實現彈幕效果，最簡單的方法就是DOM+CSS3控制，如果我們的彈幕效果比較簡單，使用CSS3動畫實現也不失為一個好的方法。
但是如果我們的彈幕數據量比較大，就像下面這種：
使用DOM來實現很容易卡成了80年代的拖拉機——一頓一頓的。
很顯然，面對這種多元素的復雜動畫，使用canvas實現是更加合適的，動畫會流暢很多。
本文就將展示兩個案例，使用canvas實現彈幕效果。其中一個效果是靜態的彈幕數據固定的無限循環的效果，適合在個人博客或者運營頁面，這種非視頻場景使用；另外一個效果是動態的彈幕數據可變的和真實HTML5交互的彈幕效果，也就是真視頻彈幕效果。
兩個高保真demo的源代碼都是可以免費使用的，使用MIT許可，也就是需要保留源代碼中的版權聲明。
好，下面我們一個人來看一下。
二、HTML5 canvas實現的靜態循環滾動播放彈幕
先看效果，您可以狠狠地點擊這里：HTML5 canvas實現的靜態循環彈幕demo
效果截圖如下：
相關JS代碼直接查看頁面源代碼就可以看到了。
使用方法和API
語法如下：
canvasBarrage(canvas, data);
其中：
canvas
canvas表示我們的畫布元素，可以直接是DOM元素，也可以是畫布元素的選擇器。
data
data表示彈幕數據，是一個數組。例如下面：
[{
value: '彈幕1',
color: 'blue',
range: [0, 0.5]
}, {
value: '彈幕2',
color: 'red',
range: [0.5, 1]
}]
可以看到數組中的每一個值表示一個彈幕的信息對象。其中value表示彈幕的文字內容；color表示彈幕描邊的顏色（彈幕文字本身默認是白色）；range表示彈幕在畫布中的區域范圍，例如[0, 0.5]表示彈幕在畫布中的上半區域顯示，[0.5, 1]表示彈幕在畫布中的下半區域顯示。
然后就可以看到無限滾動的彈幕效果了。
補充說明：
此彈幕效果默認文字大小是28px，并且文字加粗，如果這個效果不符合您的需求，需要在canvasBarrage()方法中修改源代碼。因為本來就是個簡單靜態效果，因此沒有專門設計成API。
此彈幕效果默認是白色文字加可變顏色描邊，同樣的，如果這個效果不符合您的需求，需要在canvasBarrage()方法中修改源代碼。
跟真實的彈幕效果有所不同，這里的彈幕出現的速度和時機不是基于特定時間，而是隨機產生。所以看到有些文字好像開飛機，而有些文字好像坐著拖拉機。因為是死數據，這樣設計會看上去更真實寫。
三、canvas實現的和HTML5 video真實交互的彈幕
這個原型就有點厲害了，市面上估計很難找到這么負責任的原型頁面了。實現的動機完全興趣使然，上面實現了個簡單的，就想著要不實現一個真實的，萬一以后用得到呢？
先來看效果，您可以狠狠的點擊這里：HTML5 canvas和mp4視頻真實交互彈幕demo
頁面效果截圖如下：
可以看到：
為了方便演示，我特意錄制了一個21秒的視頻；
可以實時更改彈幕的透明度字號大小位置等；
可以實時發送彈幕并顯示。
部分演示如下：
點擊播放按鈕：
1秒后，此時可以看到彈幕呈現，2秒后有彈幕進入：
設置位置居底顯示后：
也可以發送彈幕：
使用方法和API
語法如下：
new CanvasBarrage(canvas, video, options);
其中：
canvas
canvas表示我們的畫布元素，只能是DOM元素。
video
video表示我們播放的視頻元素，只能是DOM元素。
options
options為可選參數，包括：
API名稱默認值簡單釋義
opacity100彈幕透明度。數值。0表示完全透明，100表示完全不透明。
fontSize24彈幕文字大小。數值。單位px。
speed2彈幕移動速度。數值。單位px。如果設置為0，則表示彈幕不移動，直接視頻中間區域顯示。
range[0,1]彈幕顯示的垂直范圍。數組。支持兩個值。[0,1]表示彈幕整個隨機分布，[0,0.5]表示只在上半區域隨機分布，[0.5,1]表示只在下半區域隨機分布。
colorwhite文字顏色。字符串。顏色值，可以是關鍵字，也可以是16進制顏色表示，例如#ff9000等。
data[]彈幕數據。數組。數組中的值只能是一個一個的彈幕數據對象，例如：
[{
value: '彈幕1',
time: 1
}, {
value: '彈幕2',
time: 2
}]
value和time是必須的，分布表示彈幕內容，和彈幕在視頻播放到什么時候顯示（單位是秒）。其他可選參數包括options參數中除data以外的所有參數，用來覆蓋全局設置，例如：
[{
value: '彈幕',
time: 1,
color: 'red'
}]
此時“彈幕”這個文字的顏色就不是默認的白色，而是這里設置的紅色。
如何修改全局設置和添加彈幕？
當我們使用new CanvasBarrage()構造完我們的彈幕方法后，會返回一個彈幕對象，通過調用這個對象暴露的屬性和方法，就可以進行全局的設置和添加彈幕等。例如：
var myBarrage = new CanvasBarrage(canvas, video, options);
如果我們想把彈幕透明度改成50%透明，可以：
myBarrage.opacity = 50;
就這么簡單，于是新出現的彈幕都會以50%透明顯示，類似的，彈幕文字大小和顏色，彈幕顯示的區域范圍都可以通過這樣設置，例如：
myBarrage.fontSize = 20;
就是把彈幕文字顏色改成20px大小。
如果我們想動態添加彈幕，可以使用暴露的add()方法，語法如下：
myBarrage.add(obj);
其中obj的參數類型和支持屬性和options-data數組中對象一模一樣。例如：
myBarrage.add({
value: 'new CanvasBarrage()',
color: '#ff0000',
time: 0
});
結果就是下面的效果：
myBarrage還暴露了一個名為reset()方法，可以清除屏幕上所有的彈幕，并重新根據視頻時間開始運動與顯示。視頻點擊跳轉時候的彈幕處理就是調用的此方法。
補充說明
以上演示的全部交互效果和語法說明在demo頁面的源代碼中均有示意。
CanvasBarrage實例方法我已經專門挪到一個名為canvasBarrage.js中。
最后，再次明確下，保留JS中的版權聲明，萬一回頭這個JS升級了或者修復了某些問題，你還可以溯源。
感謝LuLu UI對本demo提供的交互組件支持。
四、結束語
我特意看了下真實的視頻網站的HTML5 video視頻是如何處理彈幕效果的，例如騰訊視頻，發現是基于DOM實現的（JS+DOM）：
然后B站也是基于DOM實現的，也就是一開始我所說的DOM+CSS3實現：
然后我陷入了深深的沉思……
