canvas滚动 vue_基于Canvas+Vue的弹幕组件

更新：支持头像和背景色设置

更新：支持实时弹幕插入，支持弹幕的流式布局

最近由于项目需要定制化一个弹幕功能，所以尝试使用canvas来开发组件。经过测试在一些低端机的效果也没有明显的卡顿，和大家交流一下

弹幕效果

功能介绍

支持循环弹幕

弹幕不重叠

支持选择轨道数

支持弹幕发送

使用

npm i vue-barrage

参数配置

name

type

default

desc

barrageList

Array

[]

弹幕数据

speed

Number

4

弹幕滚动速度

loop

Boolean

true

是否循环滚动

channels

Number

2

弹幕轨道数

borderColor

String

'#000'

弹幕边框

background

String

'#FFF'

弹幕背景色

功能实现

html样式

ref="canvasContainer"

:width="barrageWidth"

:height="barrageHeight"

style="display: none;">

class="container"

:style="{height: barrageHeight/2+'px'}"

>

id="canvas"

ref="canvas"

:width="barrageWidth"

:height="barrageHeight"

:style="{'width': barrageWidth/2 + 'px',

'height': barrageHeight/2 + 'px'}"

/>

<