canvas-barrage

一个基于canvas的弹幕发射器，查看线上demo

Build

• installation dependence

  yarn // or npm install

• build for es5

  gulp build_es5

• build for es6

  gulp build_es6

Usage

• used in es5

  <canvas width='700' height='400'></canvas>
  <script src="../dist/index.js"></script>
  <script>
      let canvasEle = document.querySelector('canvas')
      let barrage = new Barrage(canvasEle)
      barrage.pushMessage({text: '弹幕发射，biu'})
  </script>

• used in es6
  1. install package

     yarn add canvas-barrage // or npm install canvas-barrage

  2. use

     <canvas width='700' height='400'></canvas>
     <script>
         import Barrage from 'canvas-barrage'
         let canvasEle = document.querySelector('canvas')
         let barrage = new Barrage(canvasEle)
         barrage.pushMessage({text: '弹幕发射，biu'})
     </script>

Apis

• new Barrage(options) - 构造函数，初始化

  | # | name | type | default | desc | | :--- | :--- |:--- | :--- | :--- | | 1 | canvasDom | object | null | 必填，canvas dom对象 | | 2 | msgStackLength | number | 300 | 最多弹幕数 | | 3 | fontSize | number | 10 | 字体大小 |

• .pushMessage(options) - 发送弹幕

  | # | name | type | default | desc | | :--- | :--- |:--- | :--- | :--- | | 1 | text | string | '' | 必填，弹幕文字内容 | | 2 | color | string | 随机色 | 弹幕颜色，非指定的情况下随机取色 | | 3 | speed | number | 2到4的随机色 | 弹幕移动速度 |

• .clear() - 清除

• .close() - 关闭弹幕

• .open() - 开启弹幕