html5使用canvas制作弹幕功能实例讲解
2020-11-27
来源：个人技术集锦
这篇文章主要介绍了html5使用canvas实现弹幕功能示例的相关资料,需要的朋友可以参考下
最近在着手开发弹幕视频网站，通过html5中的canvas实现了弹幕的功能。
那么闲言碎语不要讲，先说思路后上代码。
思路：从页面布局上来说就是将一块画布覆盖在了video标签产生的视频窗口之上，使用绝对定位就能实现了。最重要的就是js控制画布上弹幕的显示了，每一个弹幕都包装成一个对象，对象包含的属性有弹幕应该出现的时间，弹幕的颜色，弹幕是否是移动的以及弹幕的文本。弹幕对象拥有方法包含：设置弹幕的横纵坐标，弹幕的移动函数。实现的原理，在监听视频开始播放的事件，在视频开始播放时生成一个定时器，定时器每隔一个时间去遍历循环弹幕对象数组并根据对象的属性在画布的适当位置上绘制出弹幕，计时器中除了绘制弹幕的代码还有执行更新弹幕数组的代码。
下图是弹幕效果截屏
那么下面开始直接上代码：
希望能够对想要制作弹幕的同学有所帮助，还可以去github下载完整的项目代码：gitbub项目地址