barrage

一个基于canvas的弹幕组件

弹幕效果

功能点

1. 支持循环弹幕
2. 弹幕不重叠
3. 支持选择轨道数
4. 支持弹幕发送
5. 支持弹幕头像
6. 支持背景颜色配置
7. 背景色和渐变背景色

使用

npm install vue-barrage

参数配置

| name | type | default | desc | | ------ | ------ | ------ | ------ | | barrageList | Array | [] | 弹幕数据 | | speed | Number | 4 | 弹幕滚动速度 | | loop | Boolean | true | 是否循环滚动 | | channels | Number | 2 | 弹幕轨道数 | | borderColor | String | '' | 弹幕边框颜色 | | background | String | '#FFFFFF' | 弹幕背景色 | | linearGradient | String | '' | 弹幕渐变背景色 |

使用

<barrage
    ref="barrage"
    class="barrage"
    :barrage-list="barrageList"
    :speed="speed"
    :loop="loop"
    :channels="channels"
    :border-color="borderColor"
    :background="background"
    :linear-gradient="linearGradient"/>
    
import Barrage from 'vue-barrage'

// 弹幕数据初始化  
this.barrageList = [{
	icon: 'https://user-gold-cdn.xitu.io/2019/3/3/169412b9920a8e31?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
   content: '试数据测试数测试数据数测试数据',
   color: 'white'
}, {
   content: '试数据测试数测试数据数测试数据',
   color: 'white'
}]
// 新增弹幕
this.$refs.barrage.add({
   content: '增加一条新的弹幕增加一条新的弹幕',
   color: 'white'
})

源码地址