使用canvas实现和HTML5 video交互的弹幕效果

在HTML文件中添加<canvas>和<video>元素：

html 复制代码

<canvas id="danmakuCanvas"></canvas>
<video id="videoPlayer" width="640" height="360" src="video.mp4" controls></video>

然后，在JavaScript文件中获取相关元素，并初始化弹幕系统：

javascript 复制代码

const canvas = document.getElementById('danmakuCanvas');
const video = document.getElementById('videoPlayer');

const danmaku = new Danmaku(canvas, video); // 创建弹幕系统实例
danmaku.init(); // 初始化弹幕系统

接下来，我们需要创建一个Danmaku类来处理弹幕的绘制和管理。请注意，这只是一个简化的实现，你可以根据自己的需求进行扩展。

javascript 复制代码

class Danmaku {
  constructor(canvas, video) {
    this.canvas = canvas;
    this.video = video;
    this.context = canvas.getContext('2d');
    this.barrages = []; // 弹幕数组
  }

  init() {
    this.canvas.width = this.video.clientWidth; // 设置canvas的宽度与视频保持一致
    this.canvas.height = this.video.clientHeight; // 设置canvas的高度与视频保持一致

    this.video.addEventListener('play', () => {
      this.render(); // 开始渲染弹幕
    });

    this.video.addEventListener('pause', () => {
      cancelAnimationFrame(this.render); // 暂停渲染弹幕
    });
  }

  addBarrage(text, color) {
    const barrage = {
      text,
      color,
      x: this.canvas.width,
      y: Math.random() * this.canvas.height,
      speed: Math.random() * 2 + 1 // 弹幕的速度范围为1到3
    };

    this.barrages.push(barrage);
  }

  render() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

    this.barrages.forEach(barrage => {
      barrage.x -= barrage.speed; // 更新弹幕的位置
      this.context.fillStyle = barrage.color;
      this.context.font = '20px Arial';
      this.context.fillText(barrage.text, barrage.x, barrage.y);

      if (barrage.x < -barrage.text.length * 20) { // 当弹幕完全移出canvas时，从数组中删除它
        const index = this.barrages.indexOf(barrage);
        this.barrages.splice(index, 1);
      }
    });

    requestAnimationFrame(() => {
      this.render();
    });
  }
}

上面的代码创建了一个简单的弹幕系统。在addBarrage()方法中，我们可以添加新的弹幕到系统中。render()方法会每帧更新并渲染弹幕。

你可以通过调用danmaku.addBarrage(text, color)方法来添加新的弹幕。例如：

javascript 复制代码

danmaku.addBarrage('这是一条弹幕', 'red');
    这样就可以在视频上显示红色的弹幕了。

可以进一步完善弹幕系统，使其支持用户输入和交互。

在HTML文件中添加一个输入框和发送按钮：

html 复制代码

<input type="text" id="danmakuInput" placeholder="请输入弹幕内容">
<button id="sendButton">发送</button>

然后在JavaScript文件中，为发送按钮添加点击事件，并将用户输入的弹幕添加到弹幕系统中：

javascript 复制代码

const sendButton = document.getElementById('sendButton');
const danmakuInput = document.getElementById('danmakuInput');

sendButton.addEventListener('click', () => {
  const text = danmakuInput.value;
  danmaku.addBarrage(text, 'blue');

  danmakuInput.value = ''; // 清空输入框内容
});

这样，当用户点击发送按钮时，会将输入框中的文本作为弹幕内容添加到弹幕系统中，并清空输入框。

除此之外，我们还可以添加一些其他的交互功能，比如暂停/播放时禁止弹幕，点击某条弹幕时暂停/播放视频等。

javascript 复制代码

danmaku.video.addEventListener('click', () => {
  if (danmaku.video.paused) {
    danmaku.video.play();
  } else {
    danmaku.video.pause();
  }
});

danmaku.video.addEventListener('play', () => {
  danmaku.barrages.forEach(barrage => {
    barrage.speed = barrage.speed; // 恢复弹幕速度
  });
});

danmaku.video.addEventListener('pause', () => {
  danmaku.barrages.forEach(barrage => {
    barrage.speed = 0; // 暂停弹幕移动
  });
});

在为视频元素添加了点击事件，实现了点击视频时的暂停/播放功能。同时，当视频暂停时，弹幕系统也会暂停弹幕的移动，保持与视频的同步。

这样，就实现了一个基本的使用Canvas和HTML5 Video交互的弹幕效果。你可以根据需求进一步扩展和定制该系统，比如增加弹幕的样式、位置、字体大小等属性，以及优化弹幕的显示效果等。