简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

html5使用canvas实现弹幕功能示例

来源:易贤网   阅读:2154 次  日期:2017-09-29 15:05:06

温馨提示:易贤网小编为您整理了“html5使用canvas实现弹幕功能示例”,方便广大网友查阅!

html5使用canvas实现弹幕功能示例

最近在着手开发弹幕视频网站,通过html5中的canvas实现了弹幕的功能。

那么闲言碎语不要讲,先说思路后上代码。

思路:从页面布局上来说就是将一块画布覆盖在了video标签产生的视频窗口之上,使用绝对定位就能实现了。最重要的就是js控制画布上弹幕的显示了,每一个弹幕都包装成一个对象,对象包含的属性有弹幕应该出现的时间,弹幕的颜色,弹幕是否是移动的以及弹幕的文本。弹幕对象拥有方法包含:设置弹幕的横纵坐标,弹幕的移动函数。实现的原理,在监听视频开始播放的事件,在视频开始播放时生成一个定时器,定时器每隔一个时间去遍历循环弹幕对象数组并根据对象的属性在画布的适当位置上绘制出弹幕,计时器中除了绘制弹幕的代码还有执行更新弹幕数组的代码。

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:HTML5 FormData 方法介绍以及实现文件上传示例
下一篇:html5超简单的localStorage实现记住密码的功能实现
易贤网手机网站地址:html5使用canvas实现弹幕功能示例
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!