-
说起弹幕看过视频的都不会陌生，那满屏充满着飘逸评论的效果，让人如痴如醉，无法自拔
-
最近也是因为在学习关于 canvas 的知识，所以今天就想和大家分享一个关于弹幕的故事
-
那么究竟弹幕是怎样炼成的呢？ 我们且往下看(look)
看什么？看效果
效果图已经呈现给各位了，那么是不是有点小激动呢？是的，感慨万分，思绪宁乱，无语凝噎
无论以后我们的工作中是否会遇到这样的需求，也请给自己一个增加技能的机会吧！！
本次弹幕的效果，项目结构如下图所示
项目整体已经给出，那么我们就撸起袖子加油干吧。
让弹幕飞
上面我们提到了 canvas 的事情，所以呢，这就是制作弹幕了。我们利用 canvas 绘图来实现弹幕的功能
首先，我们先给出html的结构
// index.html文件
<div class="wrap">
<h1>听妈妈的话 - 周杰伦</h1>
<div class="main">
<canvas id="canvas"></canvas>
<video src="../source/mv.mp4" id="video" controls width="720" height="480"></video>
</div>
<div class="content">
<input type="text" id="text">
<input type="button" value="发弹幕" id="btn">
<input type="color" id="color">
<input type="range" id="range" max="40" min="20">
</div></div>
// 引入index.js文件用来实现弹幕功能
<script src="./index.js"></script>
结构相对来说没什么高级的内容，主要就是写上了 canvas 标签还有 video 标签，他们才是视频网站弹幕的绝佳拍档
那么不再卖关子了，赶紧进行主要活动吧
模拟数据
// index.js文件
let data = [
{value: '周杰伦的听妈妈的话，让我反复循环再循环', time: 5, color: 'red', speed: 1, fontSize: 22},
{value: '想快快长大，才能保护她', time: 10, color: '#00a1f5', speed: 1, fontSize: 30},
{value: '听妈妈的话吧，晚点再恋爱吧！爱呢？', time: 15},
];
数据里代表了什么：
-
value：代表弹幕的内容 (必填)
-
time：代表弹幕展现的时间 (必填)
-
color：代表弹幕文字的颜色
-
speed：代表弹幕飘过的速度
-
fontSize：代表弹幕文字的大小
-
opacity：代表弹幕文字的透明度
除了弹幕的内容和展现的时间外，其他都是可选的，模拟的数据里没有这些参数也没关系的
获取 dom 元素
// index.js文件
// 模拟数据
...省略
// 获取到所有需要的dom元素
let doc = document;
let canvas = doc.getElementById('canvas');
let video = doc.getElementById('video');
let $txt = doc.getElementById('text');
let $btn = doc.getElementById('btn');
let $color = doc.getElementById('color');
let $range = doc.getElementById('range');
Canvas渲染弹幕
下面我们将用面向对象的方式来实现canvas绘制弹幕的功能，之所以选择用这种方式主要是方便复用和后续添加方法；
下面我们先来创建一个CanvasBarrage类，主要用做canvas来渲染整个弹幕；
在实现之前，我们先来调用一下，看看是如何创建实例的。
// index.js文件
// 模拟数据
...省略
// 获取到所有需要的dom元素
...省略
// 创建CanvasBarrage类
class CanvasBarrage {
// todo
}
// 创建CanvasBarrage实例
let canvasBarrage = new CanvasBarrage(canvas, video, { data });
实现 CanvasBarrage
我们在“得到所有的弹幕消息”那里，通过数组的 map 方法返回的还是个数组，不过返回的内容是一个 Barrage类，这是为什么呢？
还记得之前说过么，用类的好处就是方便扩展，后续再添加方法的话可以直接在该类中添加即可。
所以我们也不推崇直接map方法里直接返回一个{}这种形式
// 不推荐
this.barrages = this.data.map(item => { item });
说到这里我们还要先写一下Barrage这个类，不然接下来的console.log(this)会因为找不到Barrage类而报错
// index.js文件
++++++++++++++++++++++
// 创建Barrage类，用来实例化每一个弹幕元素
class Barrage {
constructor(obj, ctx) { // todo }
}
++++++++++++++++++++++
class CanvasBarrage { ...省略}
Now，通过上面代码中的console.log(this)，我们可以看到，所有挂载到this实例上的属性和原型上的方法都呈现眼前了
render 一下
接着上面的 CanvasBarrage 类里 render 方法继续写，我们来把 todo 完成
todo都做了什么？
1、清除之前画布所有的绘制，防止绘制重叠的影响
-
this.clear()
2、渲染真正的弹幕数据 (还未实现)
-
this.renderBarrage()
3、判断是否继续渲染弹幕
-
this.isPaused为false时表示为播放状态
4、递归调用render
-
通过requestAnimationFrame来递归调用render
-
要比setInterval这样的方式好很多
渲染整个弹幕 render 方法就完成了，那么要继续写了，应该是刚才未实现的 renderBarrage 方法了
But，在此之前，我们要先写个别的，它就是Barrage类
因为还需要它来大显身手一下呢，每一个弹幕的实例都由它来制造
创建 Barrage 类
弹幕制造者来了，下面我们就来实现一下这个Barrage类，看它都具备哪些属性和方法，继续todo吧
todo都做了什么？
1、从传入的obj中取到必要的value和time
this.value = obj.value; // 内容
this.time = obj.time; // 时间
2、初始化弹幕
-
对每个弹幕所需的参数进行设置，如果obj上没有，就取默认参数
-
计算每个弹幕的宽度
-
由于不能直接操纵canvas画布里的元素，所以先创建一个p标签
-
p标签的宽度即为弹幕的宽 -> this.width = p.clientWidt
-
设置每个弹幕的x和y坐标 (起始位置)
-
横向x坐标起始位置都是从右边进入，即：画布的宽度
-
this.x = this.context.canvas.width
-
纵向y坐标起始位置是不固定的，选在画布之内的任意位置出现
-
this.y = this.context.canvas.height * Math.random()
-
处理弹幕超出画布区域
-
canvas是按照字号基线来展示字体的，如果小于这个字号大小
-
this.y = this.fontSize
-
如果大于了画布高度 - 字号大小
-
this.y = this.context.canvas.height - this.fontSize
3、渲染每个弹幕
-
绘制文本需要设置文本的字体字号、颜色和文本的内容与坐标
-
字体字号api
-
this.context.ctx.font = ${this.value}px Arial
-
颜色api
-
this.context.ctx.fillStyle = this.color
-
内容与坐标api
-
this.context.ctx.fillText(this.value, this.x, this.y)
以上三步就是整个Barrage类所做的事情了。Barrage这个类都已经敲完了，那么接下来开始真正的渲染步骤吧
renderBarrage才是主角
此时我们再添加一个触发弹幕的事件，让弹幕飞起来
大家一起写到了这里，也是时候展示一下成果了，往下看
别急，让弹幕再飞一会儿
渲染弹幕的功能，我们已经完成了，接下来让我们马不停蹄的写下如何发弹幕吧。别犹豫，开撸！！！
发弹幕
发弹幕相对来说还是很简单的，获取到 value, time, color, fontSize 之后把他们当作对象传给 CanvasBarrage 的 add方法进行添加就好了
下面我们再写一下add方法，回到CanvasBarrage类里继续写
// index.js文件
class CanvasBarrage {
constructor() { ...省略}
render() { ...省略 }
renderBarrage() { ...省略 }
clear() { ...省略 }
+++++++++++++++++++++++++++
add(obj) {
// 实际上就是往barrages数组里再添加一项Barrage的实例而已
this.barrages.push(new Barrage(obj, this));
}
+++++++++++++++++++++++++++
}
完成，漂亮，看看效果吧
写到这里我们已经完成了视频网站上的弹幕功能了，可喜可贺
下面我们再来完善一下视频播放时对弹幕的播放处理吧
暂停和拖动
-
暂停就停止渲染弹幕
// index.js文件
...省略
// 播放
video.addEventListener('play', () => {
canvasBarrage.isPaused = false;
canvasBarrage.render();
});
+++++++++++++++++++++++++++++++++++++++
// 暂停
video.addEventListener('pause', () => {
// isPaused设为true表示暂停播放
canvasBarrage.isPaused = true;
});
+++++++++++++++++++++++++++++++++++++++
-
回放时需要重新渲染该时刻的弹幕
// index.js文件
// 暂停
video.addEventListener('pause', () => {
canvasBarrage.isPaused = true;
});
+++++++++++++++++++++++++++++++++++++++
// 拖动进度条时触发seeked事件
video.addEventListener('seeked', () => {
// 调用CanvasBarrage类的replay方法进行回放，重新渲染弹幕
canvasBarrage.replay();
});
+++++++++++++++++++++++++++++++++++++++
-
让我们再次回到CanvasBarrage这个类上
OK，写到这里，所有关于弹幕功能的代码就全部结束了！！
如果工作中让你开发弹幕功能，你也可以在多敲几遍以上代码之后，得心应手的保证完成任务了。
敬请期待，下节更精彩
接下来我们再利用 WebSocket 和 redis 来进行一下较为实战的功能吧。
作者：chenhongdong
来源：
https://juejin.im/post/5be54a286fb9a049ae07641b#comment