弹幕

写在最前

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

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

弹幕较多

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

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

本文就将展示使用canvas实现动态的弹幕数据可变的和真实HTML5 <video>交互的弹幕效果，也就是真视频弹幕效果。

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

好，下面我们来看一下使用canvas来进行视频播放并且添加弹幕功能。

实现效果

canvas载入视频

canvas中的drawImage方法绘制图片所需要的数据源不单单是某张图片，同样可以是使用视频的某一帧来进行绘制。就像这样：

drawImage方法也可以绘制视频

为什么通过canvas绘制视频？

因为canvas提供了getImageData && putImageData方法使得操作者可以动态得来更改每一帧图像的显示状态，如果你知道它应该怎么变的话~

视频中的黄色背景进行色调的变化：

视频中的黄色背景进行色调的变化

视频中效果截图如下：

视频中的黄色背景进行色调的变化

基于canvas的图像处理可以实现很强大的功能，比如滤镜啊之类的~

腾讯的Aolly Team团队出品的AlloyImage - 基于HTML5技术的专业图像处理库就是个很好的范例~

弹幕功能

弹幕功能分为两部分：

监听新弹幕的推送渲染弹幕到页面

监听新弹幕的推送

通过维护一个弹幕数组来实时去渲染每一个弹幕字条的应有位置。而何时更新这个数组，为了解耦作者使用了发布订阅的方式来进行数组的更新。当然这里并不是一定要使用这种模式，只不过作者刚刚学习完所以拿来用一下而已。千万别喷我：）

监听新弹幕的推送

渲染弹幕到页面

声明了一个弹幕的构造函数，内部包含了其各种属性并且在原型链中添加了draw方法来进行绘制：

渲染弹幕到页面

源码地址