一个可以支持文本，图片，文本+表情的简单弹幕插件

前言

最近因项目需要，使用canvas做了一个简单的弹幕插件，能满足基本功能, 后期还需要不断完善，有好的建议和想法欢迎提出。

为了做一个弹幕前期调研考察了颇久，首先列一下我需要的功能：

1. 文字弹幕
2. 新增弹幕可以根据跑道上已有弹幕长短自动选择跑道
3. 图片弹幕
4. 文字+表情
5. 单条弹幕可以点击暂停并进行操作，如点赞等（本次不需要实现，后续再考虑😳）
6. 设置速度

经过调研目前有两种弹幕实现方式：CSS3 Animation 和 Canvas，毋庸置疑，CSS3的弹幕更加灵活，后期处理单条暂停，点击也更加简单。但是性能不如canvas, 在经过一番抉择之后，发现canvas也是可以实现单条控制的功能，那必然选择性能更好的canvas以及requestAnimationFrame动画。

弹幕中最难也是最核心的应该就是计算弹幕什么时机在哪个轨道出现。在实现之前需要深切理解之后再动手。
预览效果：

正文

弹幕相关计算：
1，弹幕容器需要根据父级容器自适应宽高，并根据高度计算跑道数量，跑道高度这里通过传入的字号大小进行计算。

2，每条跑道的top值，这里根据字号大小，padding-top, 以及上一个跑道的高度计算得到。

3，每条弹幕需要位移的距离，我们这里从第一条弹幕说起：

• 第一条弹幕的left为整个画布的宽度+弹幕自身的宽度（自身宽度可由canvas的measureText方法计算得到）
• 之后每条弹幕的left则等于前一条弹幕的left+当前这条弹幕的宽度+两条弹幕之间的间距。

4，弹幕每帧动画移动的位移在这里等于速度，可在初始化弹幕插件时传入。

弹幕执行逻辑：
1，初始化弹幕插件时会先根据父级容器计算弹幕容器高度宽度，然后创建画布，
2，根据字体大小计算跑道数量，并计算每条跑道上的弹幕的top值（同一跑道的top值相同）。
3，开启弹幕，此时requestAnimationFrame开始执行，并调用addTextMessages方法新增弹幕队列。
4，每绘制完一条弹幕将其从队列移除，直到队列为空时停止执行。

附上github地址：https://github.com/YTTJamie/d...