高性能JavaScript弹幕库
https://logcas.github.io/a-barrage/example/
A-Barrage同时支持Canvas渲染和HTML+CSS的渲染模式，你可以根据实际情况采用不同的渲染引擎进行弹幕的渲染。其中，Canvas是非交互式渲染，也就是说，采用Canvas渲染的弹幕并不会有任何的交互操作，纯展示性质；HTML+CSS是交互式渲染，如果你的网站允许用户与弹幕之间进行一些交互（如点赞、回复等），那么可以采用HTML+CSS的渲染模式，它会结合浏览器的DOM事件进行响应。
A-Barrage默认使用的是Canvas渲染模式。
采用Canvas渲染，即意味着你需要在模板中提供一个<canvas>元素：
<canvas id="danmu"></canvas>然后，实例化一个ABarrage对象，同时传入canvas元素：
new ABarrage(
'#danmu',
config
)其中，config对象支持如下属性（全部都是可选的，如下值为默认值）：
config = {
engine: 'canvas', // 渲染引擎 canvas 或 css3 可选
zoom: 1, // 文字缩放比
proxyObject: null, // 事件代理触发对象
usePointerEvents: true, // 屏蔽弹幕画布的点击事件
maxTrack: 4, // 最大轨道数
fontSize: 20, // 文字大小，单位为px
fontColor: '#fff', // 文字颜色
duration: 10000, // 弹幕留存时间
trackHeight: 20 * 1.5 // 轨道高度，默认为默认文字的1.5倍
}采用HTML+CSS渲染，你需要做的是准备一个<div>元素就好：
<div id="container">
<div id="danmu"></div>
<video/>
</div>然后，实例化一个ABarrage对象，同时传入div元素：
new ABarrage(
'#danmu',
config
)其中，config对象支持如下属性（全部都是可选的，如下值为默认值）：
config = {
engine: 'css3', // 渲染引擎 canvas 或 css3 可选
zoom: 1, // 文字缩放比
proxyObject: null, // 事件代理触发对象
usePointerEvents: true, // 屏蔽弹幕画布的点击事件
maxTrack: 4, // 最大轨道数
fontSize: 20, // 文字大小，单位为px
fontColor: '#fff', // 文字颜色
duration: 10000, // 弹幕留存时间
trackHeight: 20 * 1.5, // 轨道高度，默认为默认文字的1.5倍
wrapper: document.querySelector('#container') // wrapper 用于弹幕交互的事件代理，如果需要交互，则必须传入
}然后，可以通过add()方法添加弹幕：
// 添加滚动弹幕
instance.add(danmu, 'scroll')
// 添加固定在顶部的弹幕
instance.add(danmu, 'fixed-top')
// 添加固定在底部的弹幕
instance.add(danmu, 'fixed-bottom')其中，第一个参数是一个RawBarrageObject对象，它的类型是这样的：
RawBarrageObject {
text: string // 文本
color?: string // 颜色，可选
size?: number // 字体大小，可选
}第二个参数也是可选的，默认为scroll，即滚动弹幕。顶部弹幕和底部弹幕分别为：fixed-top、fixed-bottom。
首先，为了弹幕的正常显示，你必须拥有这样的层级：
------用户视觉-------
👇 👇 👇 👇
--------弹幕--------
-------播放器-------
以上层级的HTML结构一般是这样的：
<div id="container">
<video/>
<canvas id="danmu"></canvas>
<div>这样会造成一个问题，因为弹幕元素和播放器元素是兄弟元素结点，所以，当点击弹幕时，事件并无法传达到播放器上。
为了解决事件被阻挡的问题，这里主要使用了两种方法：
pointer-events:none- 事件代理
配置选项中的usePointerEvent默认为true，也就是默认状态下会为画布元素添加该CSS属性。这样的话画布元素就不会成为鼠标事件的target，那么鼠标事件就会从下一层的元素开始触发。
但是这个属性有兼容性问题，对于IE仅支持IE11+的浏览器，其余浏览器的最新版本基本已支持。
综上，所以有了事件代理机制。
ABarrage类是继承自EventEmitter的，因此它也是一个事件中心，拥有$on、$once、$emit、$off等方法。
对于click、dblclick、mousedown、mousemove、mouseout、mouseover、mouseup这几个鼠标事件，当画布触发这些事件时，会调用$emit同步触发通过$on绑定的事件处理器。
除此之外，你也可以添加自定义事件。
其中，barrage是一个RawBarrageObject对象，它的结构是这样的：
{
text: string,
color?: string,
size?: number
}type可选scroll、fixed-top、fixed-bottom，分别代表滚动弹幕、固定顶部弹幕、底部弹幕。默认为scroll。
弹幕开始
弹幕暂停
宽度会影响弹幕轨道的宽度，当canvas的宽度更改时，务必调用该方法更新轨道宽度。
清空弹幕
设置弹幕文字的不透明度，默认为1，即不透明。取值区间为[0,1]。
全局设置文字的缩放大小。需要注意的是，setFontSize并不会改变实话配置中的fontSize大小，而是通过设置config.zoom（缩放比率）的方式更改输出文字的大小。默认为1。
绑定事件处理器。
绑定事件处理器，但它只会执行一次。
接触事件处理器，当handler不传时，会消除eventName事件的所有回调。
触发事件处理器，从第二个参数开始可以传入回调函数的参数。
当鼠标定位到某个弹幕时触发，handler回调函数的参数分别为：弹幕实例、弹幕对应的DOM元素。
当鼠标从某个弹幕移出时触发，handler回调函数的参数分别为：弹幕实例、弹幕对应的DOM元素。
当鼠标点击某个弹幕时触发，handler回调函数的参数分别为：弹幕实例、弹幕对应的DOM元素。
MIT