HTML5如何实现静态循环滚动播放弹幕

这篇文章将为大家详细讲解有关HTML5如何实现静态循环滚动播放弹幕，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

使用方法和API

语法如下：

canvasBarrage(canvas, data);

其中：

canvas

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

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() 方法中修改源代码。

• 跟真实的弹幕效果有所不同，这里的弹幕出现的速度和时机不是基于特定时间，而是随机产生。所以看到有些文字好像开飞机，而有些文字好像坐着拖拉机。因为是死数据，这样设计会看上去更真实写。

源代码：

关于"HTML5如何实现静态循环滚动播放弹幕"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。