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

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 < 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); // 弹幕在画布中不可见时，从数组中移除该项
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">发表</button>
var dmInput = '';
var color = ''; // 可自定义弹幕的颜色
function sent() {
  if (!dmInput) return;
  stop();
  pushDm(dmInput, color);
  start();
  dmInput = '';
}

有待改进的地方和疑问？速度不恒定时，怎么保持弹幕不重叠视频弹幕是根据弹幕发送时间点来定位到视频的每一帧？如何实现？

总结

以上所述是小编给大家介绍的使用canvas实现一个vue弹幕组件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！