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

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


//为了不出现模糊，需要设置canvas的css宽高为上下文宽高的1/devicePixelRatio，
本文是对于devicePixelRatio:2的设备设置的，该值可从window.devicePixelRatio取得。

 
// 后面会用到

var dmArr = [];
var gap = 80; // 弹幕的上下间距
var hiddenCanvas = this.$refs.hiddenCanvas;
// 增加弹幕的方法
function pushDm(text, color) {
  let y = getY(); // 先确定跑道
  let x = 600; // 初始x坐标为canvas的右边界
  let delayWidth = 0; // 同跑道
  for (let i = 0, len = dmArr.length; i 

var timer = null;
var ctx = this.$refs.canvas.getContext('2d');
function start(){
 timer = setInterval(() => {
  ctx.clearRect(0, 0, 600, 600); // 每次需要清空画布
  ctx.save();
  ctx.fOnt= '30px Microsoft YaHei'; // 这里需要把字体大小设为需要显示的css大小的2倍（devicePixelRatio为2时）
  if (!dmArr.length) stop(); // 如果没有新弹幕了，就停止计时器
  for (let i = 0, len = this.dmArr.length; i 

发表
var dmInput = '';
var color = ''; // 可自定义弹幕的颜色
function sent() {
  if (!dmInput) return;
  stop();
  pushDm(dmInput, color);
  start();
  dmInput = '';
}