simple-canvas-barrage v0.0.5

一个基于canvas的弹幕插件

使用canvas编写的一个弹幕插件，目前功能比较单一，只是支持弹幕的字体大小、颜色、速度功能。

安装

安装simple-canvas-barrage的方式有两种，一种是通过仓库来下载依赖，另一种是通过使用cdn来引入。

通过npm或者yarn仓库引用

该插件支持typescript，通过包仓库安装的依赖。
因为插件自动插入需要生成弹幕的元素，所以会对目标元素进行侵入式的修改：将会把目标元素的position设置为relative。

• 使用npm安装：

  npm install --save simple-canvas-barrage

• 使用yarn安装

  yarn add simple-canvas-barrage

通过jsdelivr cdn引入

通过cdn引入是编译好的javascript文件，包含umd和esm两种模块。

• 使用umd模块

  <script src="https://cdn.jsdelivr.net/gh/Aizener/barrage@master/dist/index.umd.js"></script>

• 使用esm模块

  <script type="module">
  import Barrage from 'https://cdn.jsdelivr.net/gh/Aizener/barrage@master/dist/index.esm.js'
  </script>

使用

初始化

使用simple-canvas-barrage的方式非常简单，只需要两步：

1. 找到需要加载弹幕插件的容器，获取对应的选择器；
2. 实例Barrage类，并添加弹幕并执行run方法即可发送弹幕。

const barrage = new Barrage('.app')
barrage.addMessages({ text: '这是一条弹幕' }).run()

上述run方法可以再任意时刻执行，该方法并不是表示添加弹幕后再发射弹幕。
而是，表示该弹幕插件已启动，随时添加弹幕随时可被发射出去，这个时间是插件内部的一个定时器所规定的时间，目前为1000ms。所以，下面写法一样有效：

const barrage = new Barrage('.app')
barrage.run()
barrage.addMessages({ text: '这是一条弹幕' })

注意：run方法不要多次执行！

其他

目前，Barrage的最大渲染弹幕数量是1500条弹幕，超过这个数量的弹幕只能在当前弹幕消失之后再进行渲染；

当存储弹幕列表的list数量超过3000时，既最大渲染量的两倍，再次执行addMessage时无法添加弹幕。

方法

类型

Message

MessageStyle

LayerStyle