by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6386
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、canvas实现弹幕性能较好

从技术实现成本角度讲，要实现弹幕效果，最简单的方法就是DOM+CSS3控制，如果我们的弹幕效果比较简单，使用CSS3动画实现也不失为一个好的方法。

但是如果我们的弹幕数据量比较大，就像下面这种：

使用DOM来实现很容易卡成了80年代的拖拉机——一顿一顿的。

很显然，面对这种多元素的复杂动画，使用canvas实现是更加合适的，动画会流畅很多。

本文就将展示两个案例，使用canvas实现弹幕效果。其中一个效果是静态的弹幕数据固定的无限循环的效果，适合在个人博客或者运营页面，这种非视频场景使用；另外一个效果是动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果，也就是真视频弹幕效果。

两个高保真demo的源代码都是可以免费使用的，使用MIT许可，也就是需要保留源代码中的版权声明。

好，下面我们一个人来看一下。

二、HTML5 canvas实现的静态循环滚动播放弹幕

先看效果，您可以狠狠地点击这里：HTML5 canvas实现的静态循环弹幕demo

效果截图如下：

相关JS代码直接查看页面源代码就可以看到了。

使用方法和API

语法如下：

canvasBarrage(canvas, data);

其中：

canvas

canvas表示我们的<canvas>画布元素，可以直接是DOM元素，也可以是<canvas>画布元素的选择器。

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

页面效果截图如下：

可以看到：

1. 为了方便演示，我特意录制了一个21秒的视频；
2. 可以实时更改弹幕的透明度字号大小位置等；
3. 可以实时发送弹幕并显示。

部分演示如下：

点击播放按钮：

1秒后，此时可以看到弹幕呈现，2秒后有弹幕进入：

设置位置居底显示后：

也可以发送弹幕：

使用方法和API

语法如下：

new CanvasBarrage(canvas, video, options);

其中：

canvas

canvas表示我们的<canvas>画布元素，只能是DOM元素。

video

video表示我们播放的视频元素，只能是DOM元素。

options

options为可选参数，包括：

API名称	默认值	简单释义
opacity	100	弹幕透明度。数值。0表示完全透明，100表示完全不透明。
fontSize	24	弹幕文字大小。数值。单位px。
speed	2	弹幕移动速度。数值。单位px。如果设置为0，则表示弹幕不移动，直接视频中间区域显示。
range	[0,1]	弹幕显示的垂直范围。数组。支持两个值。[0,1]表示弹幕整个随机分布，[0,0.5]表示只在上半区域随机分布，[0.5,1]表示只在下半区域随机分布。
color	white	文字颜色。字符串。颜色值，可以是关键字，也可以是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实现：

然后我陷入了深深的沉思……

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：http://www.zhangxinxu.com/wordpress/?p=6386

（本篇完）