pp-barrage

    2.3.5 • Public • Published

    高性能canvas弹幕

    支持同时显示200条弹幕,并维持60fps帧率 Markdown

    特征

    • 弹幕优先显示在顶部
    • 弹幕永远不会重叠
    • 支持缓冲池,如果屏幕已满则推后显示
    • 支持配置弹幕滑动时长,字数多的弹幕移动更快
    • 支持弹幕字体大小配置
    • 支持弹幕轨道高度配置

    note: 依赖jquery和tween.js

    Compatibility

    Browser Support
    IE 9
    IE 10
    IE 11
    chrome 59
    FF 54

    API

    fun paramName comment
    ppParrage root:canvas节点 构造方法
    init config:配置项 初始化方法
    load bullets:弹幕数据 加载弹幕数据
    start 开始运行
    getStatus 弹幕执行状态:init,running,idle

    Usage

    • be sure that the jquery and tween.js is loaded

    Simple

    HTML

    <!DOCTYPE HTML>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
         <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
        <script src="./src/Tween.js"></script> 
        <script src="./src/index.js"></script> 
        <link href="./index.css" rel="stylesheet" type="text/css" />
        <script>
            window.onload = function () {
                var test = new ppParrage.ppParrage(document.getElementById('pg'));
                $('#init').click(function () {
                    test.init({
                        bulletHeight: 50,
                        displayTime: 6000,  // 弹幕显示的时长
                        isDebug: false,
                        fontSize: 28        // 弹幕字体大小
                    }); 
                })
                $('#start').click(function () { test.start(); })
                $('#load').click(function () {
                    test.load([
                        { msg: '我是一条弹幕' },
                    ])
                })
                $('#status').click(function () {
                     $('#status').text(test.getStatus());
                })
                $('#clarnAll').click(function () {
                     test.clarnAll();
                })
            }
        </script> 
    </head>
     
    <body>
        <canvas id="pg" width="1024" height="768">
     
        </canvas>
        <div>
            <button id="init">init</button> 
            <button id="load">load</button>
            <button id="start">start</button>
            <button id="clarnAll">clarnAll</button>
            <button id="status">status</button>
        </div>
    </body>
     
    </html>
    </html>

    版本更新

    • 2.3.5 弹幕文字居中bug修复,最后一条弹幕无法显示bug修复
    • 2.3.3 增加弹幕间距
    • 2.3.2 bug修复:clearAll函数清楚lastFired集合

    Keywords

    none

    Install

    npm i pp-barrage

    DownloadsWeekly Downloads

    18

    Version

    2.3.5

    License

    ISC

    Last publish

    Collaborators

    • billl89