一聚教程网:一个值得你收藏的教程网站

热门教程

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

时间:2022-06-25 17:52:50 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下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()方法中修改源代码。

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

源代码:


    
    

热门栏目