<canvas width="600" height="600"></canvas> // 如果單純這樣寫，canvas會出現(xiàn)模糊
<canvas width="600" height="600" style="width: 300px;height: 300px">
</canvas>
//為了不出現(xiàn)模糊，需要設(shè)置canvas的css寬高為上下文寬高的1/devicePixelRatio，
本文是對于devicePixelRatio:2的設(shè)備設(shè)置的，該值可從window.devicePixelRatio取得。
<canvas ref="hiddenCanvas" width="0" height="0" style="display: none">
</canvas> 
// 后面會用到

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 < len; i++) {
    let dm = dmArr[i];
    if (y === dm.y) { // 如果是同跑道,則往后排,設(shè)置一定的間隔，保證彈幕不會重疊；
      delayWidth += Math.floor(hiddenCanvas.getContext('2d').measureText(dm.text).width * 4 + 50);
    }  }
  dmArr.push({
    text: text,
    x: x + delayWidth,
    y: y,
    speed: 8,
    color: color || getColor()
  });
}
// 隨機獲得y坐標
function getY() {
  let range = Math.floor(600 / gap); // 跑道數(shù)量
  return Math.floor(Math.random() * range + 1) * gap;
}
// 隨機獲得顏色
function getColor() {
  return `${Math.floor(Math.random() * 16777215).toString(16)}`;
}
// 寫一個for循環(huán)，初始化30條彈幕
for (let i = 0; i < 30; i++) {
  pushDm(`It's barrage ${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'; // 這里需要把字體大小設(shè)為需要顯示的css大小的2倍（devicePixelRatio為2時）
  if (!dmArr.length) stop(); // 如果沒有新彈幕了，就停止計時器
  for (let i = 0, len = this.dmArr.length; i < len; i++) {
    let dm = dmArr[i];
    let overRange = -ctx.measureText(dm.text).width * 2;
    dm.x -= dm.speed;
    if (dm.x < overRange) {
      dmArr.splice(i, 1); // 彈幕在畫布中不可見時，從數(shù)組中移除該項
      continue;
    }
    ctx.fillStyle = `#${dm.color}`;
    ctx.fillText(dm.text, dm.x, dm.y);
  }
  ctx.restore();
 }, 20);
}
function stop() {
  clearInterval(timer);
  ctx.clearRect(0, 0, 600, 600);
}

<input type="text" @keyup.enter="sent" v-model="dmInput" maxlength="20">

<button type="button" @click="sent">發(fā)表</button>
var dmInput = '';
var color = ''; // 可自定義彈幕的顏色
function sent() {
  if (!dmInput) return;
  stop();
  pushDm(dmInput, color);
  start();
  dmInput = '';
}