html5 canvas 实现高并发视频弹幕功能 - 掘金

由于项目需要,分享自己开发的高并发弹幕功能 以下为源代码,仅80行而已,可以根据canvas 的宽高自动适配: /*! *@作者: 赵玉 *@邮箱: sailiy@126.com *@公司: 彩虹世纪文化传媒有限 | 掘金是中国质量最高的技术分享社区,邀请稀土用户作为 Co-Editor 来分享优质的技术干货,从前端到后端开发,从设计到产品,让每一个掘金用户都能挖掘到有价值的干货。

html5 canvas 实现高并发视频弹幕功能

阅读 3347
收藏 290
2017-01-09
HTML5 canvas 80 行代码实现的高并发弹幕功能,通过拉伸自动适配所有尺寸,已在 pc,手机,电视浏览器通过测试,通过 jquery 插件方式导入 —— 由sailiy分享

由于项目需要,分享自己开发的高并发弹幕功能

以下为源代码,仅80行而已,可以根据canvas 的宽高自动适配:

/*!
 *@作者:  赵玉
 *@邮箱:  sailiy@126.com
 *@公司:  彩虹世纪文化传媒有限公司
 *@项目:  jquery.barrager.js
 */
(function ($) {
    function Barrager(dom) {
        this.canvas = dom.get(0);
        this.ctx = this.canvas.getContext("2d");
        this.msgs = new Array(300);//缓冲池,长度越大,屏幕上显示的就越多
        this.width = 1280;//canvas分辨率1280*720
        this.height = 720;
        this.canvas.width=this.width;//上边的两步可以省略,直接在这里赋值
        this.canvas.height=this.height;
        this.font = "30px 黑体";//字体和字体大小
        this.ctx.font=this.font;
        //颜色数组,在绘制过程中随机从这里取出颜色
        this.colorArr=["Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue"];
        this.interval = "";
        this.draw = function () {//绘制方法
            if (this.interval != "")return;
            var _this=this;
            this.interval = setInterval(function () {//每隔20毫秒重新绘制一次,间隔最好小于40,要不然效果就跟播放图片差不多
                //1,清除屏幕
                _this.ctx.clearRect(0, 0, _this.width, _this.height);
                _this.ctx.save();
                //2,循环缓冲区域,把没有设置Left,Top,Speed,Color先赋值,赋值的就改变left值(产生移动效果),left值小于200就会从缓冲区移除
                for (var i = 0; i < _this.msgs.length; i++) {
                    if (!(_this.msgs[i] == null || _this.msgs[i] == "" || typeof(_this.msgs[i]) == "undefined")) {
                        if(_this.msgs[i].L==null || typeof(_this.msgs[i].L)=="undefined"){
                            _this.msgs[i].L=_this.width;
                            _this.msgs[i].T=parseInt(Math.random() * 700);
                            _this.msgs[i].S=parseInt(Math.random() * (10 - 4) + 4);
                            _this.msgs[i].C=_this.colorArr[Math.floor(Math.random() * _this.colorArr.length)];
                        }else{
                            if(_this.msgs[i].L<-200){
                                _this.msgs[i]=null;
                            }else {
                                _this.msgs[i].L=parseInt(_this.msgs[i].L-_this.msgs[i].S);
                                _this.ctx.fillStyle =_this.msgs[i].C;
                                _this.ctx.fillText(_this.msgs[i].msg,_this.msgs[i].L,_this.msgs[i].T);
                                _this.ctx.restore();
                            }
                        }
                    }
                }
            }, 20);
        };
        //添加数据,数据格式[{"msg":"nihao"}]
        this.putMsg = function (datas) {//循环缓冲区,把位置是空的装填上数据
            for (var j = 0; j < datas.length; j++) {
                for (var i = 0; i < this.msgs.length; i++) {
                    if (this.msgs[i] == null || this.msgs[i] == "" || typeof(this.msgs[i]) == "undefined") {
                        this.msgs[i] = datas[j];
                        break;
                    }
                }
            }
            this.draw();
        };
        this.clear = function () {//清除定时器,清除屏幕,清空缓冲区
            clearInterval(this.interval);
            this.interval="";
            this.ctx.clearRect(0, 0, this.width, this.height);
            this.ctx.save();
            for(var i=0;i<this.msgs.length;i++){
                this.msgs[i]=null;
            }
        };
    }

    $.fn.barrager = function (para) {
        if (typeof(para)=="string") {
            try{
                var api = $(this).data('barrager_api');
                api[para].apply(api);
            }catch (e){}
        } else if (typeof para == 'object' || !para) {
            $this = $(this);
            if ($this.data('barrager_api') != null && $this.data('barrager_api') != ''){
                var api = $this.data('barrager_api');
                api.putMsg(para);
            }else{
                var api = new Barrager($this);
                $this.data('barrager_api', api);
                api.putMsg(para);
            }
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.slidizle');
        }
        return this;
    }
})(jQuery);

调用方式:
html部分代码:

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./jquery.barrager.js"></script>
<canvas style="width: 1280px;height: 720px;background-color: rgba(0,0,0,0.2)">你的浏览器不支持canvas</canvas>

发送弹幕:

$('canvas').barrager([{"msg":"这是我发的。。。哈哈哈"}]);

多条发送方式:

$('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好看。。。。"}]);

清除/关闭弹幕:

$('canvas').barrager("clear");

在实际应用,可以通过ajax方式轮询异步获取数据,通过上述语句发送弹幕

github地址:https://github.com/Sailiy/JBarrager

码云地址:https://git.oschina.net/fuckshit/JBarrager

demo下载地址:http://download.csdn.net/detail/zhaoyu813113552/9719702

如果帮到了你,请给我一个star

效果截图:

qq%e6%88%aa%e5%9b%be20161222174526