一个基于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时无法添加弹幕。

方法

| 方法 | 作用 | | :---------: | :--------------------------------------------------------: | | addMessage | 添加一条弹幕， 类型：Message | | addMessages | 添加多条弹幕 | | run | 启动弹幕插件，会监听是否有弹幕数据的添加，并发射添加的弹幕 | | clear | 清除当前弹幕列表里面的数据（包括画布还未渲染的弹幕） | | stop | 暂停插件的运行，若要回复则需要执行run方法 |

类型

Message

| 属性 | 作用 | 默认 | | :--------: | :----------------------------------------------------------: | :-------------------------------------------: | | text | 弹幕文字内容 | - | | speed | 弹幕的速度，像素为单位 | 3 | | style | 弹幕的样式 | 见：MessageStyle | | type | 弹幕的显示方式，normal即从右往左移动；layer是直接显示在屏幕上 | normal | | layerStyle | type为layer时需要传入，见：LayerStyle | - |

MessageStyle

| 属性 | 作用 | 默认值 | | :--------: | :--------: | :-------------: | | color | 弹幕颜色 | #fff | | fontSize | 弹幕的大小 | 20px | | fontFamily | 弹幕的字体 | Microsoft YaHei |

LayerStyle

| 属性 | 作用 | 默认值 | | :-------: | :----------------------------------------------------------: | :----: | | x | 弹幕出现在屏幕的横坐标 | - | | y | 弹幕出现在屏幕的纵坐标 | - | | placement | 弹幕出现的位置：top,center,bottom三个可选，设置该属性后，x和y将无效 | - | | time | 弹幕消失的时间 | 3000ms |