纯js弹幕效果,vue可用

最新推荐文章于 2025-05-14 15:11:11 发布

CloudJay_喵喵喵

最新推荐文章于 2025-05-14 15:11:11 发布

阅读量519

点赞数

分类专栏：技术指南文章标签： javascript canvas

本文链接：https://blog.youkuaiyun.com/qq_31061615/article/details/111036013

版权

技术指南专栏收录该内容

20 篇文章

订阅专栏

本项目采用纯JavaScript和Canvas实现弹幕效果，支持通过数据控制弹幕速度与时间，适用于大屏互动场景，如年会等。代码轻量且不依赖第三方框架，易于集成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于张鑫旭的使用canvas实现和HTML5 video交互的弹幕效果源码改造

效果

demo效果录屏

特点

纯js轻量级,数据渲染时间自由控制,基于canvas性能好,无需引入其他框架(demo中的lottie是用于动画特效的,可以不用)

区别

去掉了与视频的绑定,根据自然时间来推送弹幕进度,比较适合年会现场等大屏静态互动场景,支持vue直接使用

使用方式

引入canvasBarrage.js

import canvasBarrage from "@/tools/canvasBarrage";
// 弹幕数据
var dataBarrage = [
  {
    value: "speed设为0为非滚动",
    speed: 0,
  },
  {
    value: "time控制弹幕时间，单位秒",
    color: "blue",
  },
  {
    value: "视频共21秒",
  },
  {
    value: "视频背景为白色",
  },
  ...
];

处理数据,这里是为了展示效果根据当前时间造假数据的时间

  mounted() {
    let nowTime = new Date();
    dataBarrage.forEach((item, index) => {
      item.time = nowTime.setTime(nowTime.getTime() + index * 200);
    });
    //创建实例
    this.canvasBarrage = new canvasBarrage("#canvasBarrage", { data: dataBarrage });
    //mounted之后立即播放
    this.canvasBarrage.play();
  }