最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5 canvas实现静态循环滚动播放弹幕代码示例
时间：2022-06-25 17:52:50 编辑：袖梨 来源：一聚教程网
本篇文章小编给大家分享一下HTML5 canvas实现静态循环滚动播放弹幕代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。
使用方法和API
语法如下：
canvasBarrage(canvas, data);
其中：
canvas
canvas表示我们的
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()方法中修改源代码。
跟真实的弹幕效果有所不同，这里的弹幕出现的速度和时机不是基于特定时间，而是随机产生。所以看到有些文字好像开飞机，而有些文字好像坐着拖拉机。因为是死数据，这样设计会看上去更真实写。
源代码：