Skip to content

zhaofinger/canvas-barrage

Repository files navigation

canvas-barrage

Build Status

一个基于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() - 开启弹幕