基于Canvas+Vue的弹幕组件的实现

* @param context
* @param x
* @param y
* @param width
* @param height
* @param radius
* @param color
*/
drawRoundRect (context, x, y, width, height, radius, color) {
context.beginPath()
context.fillStyle = color
context.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 3 / 2)
context.lineTo(width - radius + x, y)
context.arc(width - radius + x, radius + y, radius, Math.PI * 3 / 2, Math.PI * 2)
context.lineTo(width + x, height + y - radius)
context.arc(width - radius + x, height - radius + y, radius, 0, Math.PI / 2)
context.lineTo(radius + x, height + y)
context.arc(radius + x, height - radius + y, radius, Math.PI / 2, Math.PI)
context.fill()
context.closePath()
}

此处为弹幕服务函数

使用

<barrage
ref="barrage"
class="barrage"
:barrage-list="barrageList"
:speed="speed"
:loop="loop"
:channels="channels"/>
import Barrage from 'vue-barrage'
// 弹幕数据初始化
this.barrageList = [{
content: '试数据测试数测试数据数测试数据',
color: 'white'
}]
// 新增弹幕
this.$refs.barrage.add({
content: '增加一条新的弹幕增加一条新的弹幕', color: 'white'
})

结语

总的来说这个组件还有可优化的空间，后续我会继续改进。