HTML5 canvas实现静态循环滚动播放弹幕代码示例

本篇文章小编给大家分享一下HTML5 canvas实现静态循环滚动播放弹幕代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

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

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

源代码：