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

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

弹幕效果

功能介绍

支持循环弹幕

弹幕不重叠

支持选择轨道数

支持弹幕发送

使用

npm i vue-barrage

参数配置

name

type

default

desc

barrageList

Array

[]

弹幕数据

speed

Number

4

弹幕滚动速度

loop

Boolean

true

是否循环滚动

channels

Number

2

弹幕轨道数

功能实现

html样式

class="container"

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

id="canvas"

ref="canvas"

:width="barrageWidth"

:height="barrageHeight"

:style="{'width': barrageWidth/2 + 'px','height': barrageHeight/2 + 'px'}"/>

js实现

监听数据源

watch: {

barrageList (val) {

if (val.length !== 0) {

this.initData() // 数据初始化

this.render() // 开始渲染

}

}

}

数据初始化

barrageArray 是存储弹幕数据用的，