HTML5 CANVAS 弹幕插件

最新推荐文章于 2024-05-30 09:41:04 发布

findhappy117

最新推荐文章于 2024-05-30 09:41:04 发布

阅读量1.5k

点赞数

文章标签： HTML5 CANVAS 弹幕插件

本文链接：https://blog.csdn.net/findhappy117/article/details/79327377

版权

概述

修改了普通弹幕运动的算法，新增了部分功能

详细

代码下载：http://www.demodashi.com/demo/10595.html

修改了普通弹幕运动的算法，新增了部分功能，具体请参看附件里的CHANGELOG.md和README.md

一、概述

说实话，从第二版到现在又过了半年，本来以为可能不会写第三版的，顶多将第二版的代码重构下就可以了，没想到还是花了一个星期左右续写了第三版。主要是因为第二版中播放器模块和弹幕模块耦合得太严重了，远远达不到我想要的效果，所以续写了第三版。这次的代码将更轻，我去除了播放器模块，使得插件的适用范围更加的扩大，而且让我有点惊喜的是在写第三版的过程中又让弹幕系统的性能进一步得到了提升，可以讲也是额外的惊喜了。

由于第三版我是用ES6语法写的，所以兼容性不是很好（没错，我只是在针对IE10以下），就算用babel转成ES5，IE依旧毒，所以后面我会抽个时间去写个ES5全兼容版本的，不考虑IE或者只是对源码感兴趣的可以尽情使用。

二、程序实现

源码总共由4部分组成：

普通弹幕类
高级弹幕类
主程序类
封装输出函数

第4个部分比较简单，就是将所有内部的接口进行过滤，选择性地暴露一些我想暴露的内部功能接口，并且提供一个对外的接口，增加一点稳定性罢了。源码如下：

let DanMuer = function(wrapper,opts){    let proxyDMer = new Proxy( new DMer(wrapper,opts), {        get : function(target,key){            if(typeof target[key] == "function")            return target[key].bind(target);            return target[key];
        }
    }); //保证this指向原对象

    let DM = proxyDMer;    //选择性的暴露某些接口
    return {        pause : DM.pause, //暂停
        run : DM.run, //继续
        start : DM.start, //运行
        stop : DM.stop,    //停止
        changeStyle : DM.changeStyle, //修改普通弹幕全局样式
        addGradient : DM.addGradient, //普通弹幕渐变
        setSize : DM.setSize, //修改宽高
        inputData : DM.inputData, //向普通弹幕插入数据
        inputEffect : DM.inputEffect, //向高级弹幕插入数据
        clear : DM.clear, //清除所有弹幕
        reset : DM.reset, //重新从某个弹幕开始
        addFilter : DM.addFilter, //添加过滤
        removeFilter : DM.removeFilter, //删除过滤
        disableEffect : DM.disableEffect, //不启用高级弹幕
        enableEffect : DM.enableEffect, //启用高级弹幕
        getSize : DM.getSize, //获取宽高,
        getFPS : DM.getFPS //获取fps
    };
};//提供对外的引用接口if( typeof module != 'undefined' && module.exports ){    modul