canvas滚动 vue_使用canvas实现一个vue弹幕组件功能

看B站时，对弹幕的实现产生了兴趣，一开始想到用css3动画去实现，后来感觉这样性能不是很好，查了下资料，发现可以用canvas实现，于是就摸索着写了一个简单的弹幕。

弹幕功能

支持动态添加弹幕

弹幕不重叠

自定义弹幕颜色

效果图

前端框架选了比较熟悉的vuejs

弹幕滚动的基本思路就是通过定时器不断地改变弹幕的位置，时时重绘画布。

实现步骤

先加入一个canvas标签，这里有个注意点，关于设备像素比对canvas的影响，会出现绘图模糊。

// 如果单纯这样写，canvas会出现模糊

//为了不出现模糊，需要设置canvas的css宽高为上下文宽高的1/devicePixelRatio，

本文是对于devicePixelRatio:2的设备设置的，该值可从window.devicePixelRatio取得。

// 后面会用到

我们先定义一个数组来存放弹幕数据，一条弹幕信息，包括文本内容，x,y坐标位置，颜色，速度(可以是随机或者固定，为了计算简单，我们这里采用了固定的速度)

var dmArr = [];

var gap = 80; // 弹幕的上下间距

var hiddenCanvas = this.$refs.hiddenCanvas;

// 增加弹幕的方法

function pushDm(text, color) {

l