今天要做体育文字直播的项目,类似这样:

文字不断循环显示,我这里找到了一个网上的写法,分析后并贴在这里,并且封装成了jquery barrager方法,很是方便,分析了下原理,是刷新canvas

画布实现的,非常好用.后端将数据以接口形式返回给我,我把数据放到$('canvas').barrager(数据)方法里,定时请求接口并更新数据,非常方便好用.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<canvas style="width: 1280px;height: 720px;background-color: rgba(0,0,0,0.2)">你的浏览器不支持canvas</canvas>

</body>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script>

    (function ($) {

        function Barrager(dom) {

            this.canvas = dom.get(0);//jquery对象获取dom元素

            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);//0-700 高度

                                _this.msgs[i].S=parseInt(Math.random() * (10 - 4) + 4);//4-9每次更新的位置

                                _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") {//用来调用clear方法,清空弹幕

                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);

</script>

<script>

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

    $('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好看。。。。"}]);//多条发送方式

     //$('canvas').barrager(false); //清除/关闭弹幕

    $('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好客服让我看。。。。"},{"msg":"让我真好佛山市发生看。。。。"},{"msg":"撒飞洒发真好看。。。。"},{"msg":"真wqw好看。。。。"},{"msg":"真好分隔符看。。。。"},{"msg":"真好发给看。。。。"},{"msg":"真放松放松好看。。。。"},{"msg":"真好复古风格看。。。。"}]);//多条发送方式

    $('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好客服让我看。。。。"},{"msg":"让我真好佛山市发生看。。。。"},{"msg":"撒飞洒发真好看。。。。"},{"msg":"真wqw好看。。。。"},{"msg":"真好分隔符看。。。。"},{"msg":"真好发给看。。。。"},{"msg":"真放松放松好看。。。。"},{"msg":"真好复古风格看。。。。"}]);//多条发送方式

</script>

</html>

弹幕制作canvas方法,文字直播和聊天的更多相关文章

  1. 聊天室或文字直播间的效果（AS开发实战第二章学习笔记）

    聊天室或文字直播间的效果即是新的文字消息总是加入窗口末尾,同时窗口内部的文本整体向上滚动,窗口的大小.位置保持不变聊天室用到的属性与方法说明gravity 指定文本的对齐方式,取值left|botto ...

  2. web 直播&即时聊天------阿里云、融云

    随着直播越来越火,所在公司也打算制作自己的直播,所以去了解了这方面,使用后发现还是有些问题需要记录的. 经过分析,制作直播应该是分为两块来做,即直播与实时评论.这里先去制作实时评论,等直播ok后,也会 ...

  3. web 直播&即时聊天------阿里云、融云（二）

    上一篇简要主要介绍了融云制作聊天室的基本方法,这次基本属于对上一篇的补充以及进阶...^_^... (ps:吐槽一下,加了三个融云的线下qq群,全部没人解决问题,也不知道建此群的意义,若是民间的话就当 ...

  4. web 直播&即时聊天------阿里云、融云（三）

    经过前面的知识,基本已经把聊天室的功能搞定了,剩下的就是直播的问题了... 一如既往,阿里云的web demo也是少的可怜,只有一个web播放器(Prismplayer),所以这里主要就此播放器踩的坑 ...

  5. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  6. Swoole 结合TP5搭建文字直播平台

    直播模块流程: 主进程服务:主进程同时开启两个服务 http服务,负责向前端传递页面,处理登录等事务 websocket服务,服务处理直播以及聊天室等事务 在项目根目录(框架代码同级目录)建立scri ...

  7. canvas 画布 文字描边

    总结一下,canvas 画布 文字描边的2种方法以及其不同的视觉效果: 效果图: 具体代码: <canvas id="canvas" width="800" ...

  8. BMFont中文字体图集制作的方法~（for unity ngui）

    BMFont中文字体图集制作的方法~(for unity ngui) 好吧~似乎这个问题困扰了很多人,游戏开始中文化是个不错的事儿啊,这里我就做下说明,如何制作中文字体图集~ 这里的字库图集的制作更多 ...

  9. 通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能

    文字直播是满足一些观看视频直播而条件不足的球迷所设定的比赛直播方式,例如在长途车上为了能够了解比赛的实时赛况但又限于流量和网速等问题,就出现了文字直播的方式.无论是拥有无线上网卡的笔记本电脑或者手机等 ...

随机推荐

  1. DesignPattern系列__03依赖倒置原则

    依赖倒置原则(Dependence Inversion Priiciple,DIP) 介绍 High level modules should not depend upon low level mo ...

  2. 关于input[type='checkbox']全选的问题

    今天在做一个全选功能的时候,发现了一个问题,就是如果我在选择全选之前,我就已经选择了一个input,然后我再去选择全选并且以后再取消全选的时候,这个我之前选择的input始终处于选择状态,但是他的ch ...

  3. git常用指令整理

    git常用指令一览表 GIT指令 说明 git add . 将全部文件的内容加到Git索引以便执行commit. 这个指令不会检查文件夹中是否有文件被删除. 要注意的是,只有执行" git ...

  4. xpath爬虫实例，爬取图片网站百度盘地址和提取码

    某套图网站,套图以封面形式展现在页面,需要依次点击套图,点击广告盘链接,最后到达百度网盘展示页面. 这一过程通过爬虫来实现,收集百度网盘地址和提取码,采用xpath爬虫技术 1.首先分析图片列表页,该 ...

  5. 一文速览Vue全栈

    一文速览Vue全栈 原创: 新哥Lewis 天道酬勤Lewis 7月7日 Vue 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,专注于声明式渲染视图 ...

  6. Nginx编译安装模块（非重装）

    假如原已经安装好的Nginx,现在需要添加一个未被编译安装的ssl模块,我们该怎么办呢?重装,还是有其他的办法?当然不需要重装的,下面我们看下如何实现的. 1.cd到Nginx解压过后的目录[root ...

  7. final，权限，引用类型数据

    1. final关键字 1.概述 为了避免子类出现随意改写父类的情况,java提供了关键字final,用于修饰不可改变内容 final:不可改变,可以修饰类,方法和变量 类:被修饰的类,不能用于继承 ...

  8. 从IDEA角度来看懂UML图

    前言 我们目前已经学习了设计模式的7种设计原则.下面本该是直接进入具体的设计模式系列文章. 但是呢在我们学习设计模式之前我们还是有必要了解一下uml图.因为后续的设计模式文章不出意外应该会很多地方使用 ...

  9. springboot+支付宝条码支付开发详解

    背景:项目原有乐刷聚合支付,无法参加支付宝.微信等支付机构的官方活动 需求:增加原生支付(支付宝条码支付) 方法: 一.官方文档:https://docs.open.alipay.com/194/10 ...

  10. python学习笔记(2)--列表、元组、字符串、字典、集合、文件、字符编码

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1.列表和元组的操作 列表是我们以后最长用的数据类型之一,通过列表可以最方便的对数据实现最方便的存储.修改等操作 定 ...