弹幕制作canvas方法,文字直播和聊天
今天要做体育文字直播的项目,类似这样:
文字不断循环显示,我这里找到了一个网上的写法,分析后并贴在这里,并且封装成了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方法,文字直播和聊天的更多相关文章
- 聊天室或文字直播间的效果（AS开发实战第二章学习笔记）
聊天室或文字直播间的效果即是新的文字消息总是加入窗口末尾,同时窗口内部的文本整体向上滚动,窗口的大小.位置保持不变聊天室用到的属性与方法说明gravity 指定文本的对齐方式,取值left|botto ...
- web 直播&即时聊天------阿里云、融云
随着直播越来越火,所在公司也打算制作自己的直播,所以去了解了这方面,使用后发现还是有些问题需要记录的. 经过分析,制作直播应该是分为两块来做,即直播与实时评论.这里先去制作实时评论,等直播ok后,也会 ...
- web 直播&即时聊天------阿里云、融云（二）
上一篇简要主要介绍了融云制作聊天室的基本方法,这次基本属于对上一篇的补充以及进阶...^_^... (ps:吐槽一下,加了三个融云的线下qq群,全部没人解决问题,也不知道建此群的意义,若是民间的话就当 ...
- web 直播&即时聊天------阿里云、融云（三）
经过前面的知识,基本已经把聊天室的功能搞定了,剩下的就是直播的问题了... 一如既往,阿里云的web demo也是少的可怜,只有一个web播放器(Prismplayer),所以这里主要就此播放器踩的坑 ...
- 微信小程序-canvas绘制文字实现自动换行
在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...
- Swoole 结合TP5搭建文字直播平台
直播模块流程: 主进程服务:主进程同时开启两个服务 http服务,负责向前端传递页面,处理登录等事务 websocket服务,服务处理直播以及聊天室等事务 在项目根目录(框架代码同级目录)建立scri ...
- canvas 画布 文字描边
总结一下,canvas 画布 文字描边的2种方法以及其不同的视觉效果: 效果图: 具体代码: <canvas id="canvas" width="800" ...
- BMFont中文字体图集制作的方法~（for unity ngui）
BMFont中文字体图集制作的方法~(for unity ngui) 好吧~似乎这个问题困扰了很多人,游戏开始中文化是个不错的事儿啊,这里我就做下说明,如何制作中文字体图集~ 这里的字库图集的制作更多 ...
- 通过ASP.NET Ajax技术模拟实现NBA比赛文字直播功能
文字直播是满足一些观看视频直播而条件不足的球迷所设定的比赛直播方式,例如在长途车上为了能够了解比赛的实时赛况但又限于流量和网速等问题,就出现了文字直播的方式.无论是拥有无线上网卡的笔记本电脑或者手机等 ...
随机推荐
- git开发流程
典型的工作流程和做法是,由于你没有远程仓库的权限,你先在github通过fork,复制自己的一份远程仓库,然后通过clone你自己这个远程副本到本地,进行修改,修改后push到自己的githu远程副本 ...
- 浅谈NodeJS多进程服务架构基本原理
阅读目录 一:nodejs进程进化及多进程架构原理 二:node中child_process模块实现多进程 三:父子进程间如何通信? 四:理解cluster集群 回到顶部 一:nodejs进程进化及多 ...
- 0x02 递推与递归
[例题]CH0301 递归实现指数型枚举 #include <iostream> #include <cstdio> #include <algorithm> #i ...
- java并发编程（二十二）----(JUC集合)ConcurrentHashMap介绍
这一节我们来看一下并发的Map,ConcurrentHashMap和ConcurrentSkipListMap.ConcurrentHashMap通常只被看做并发效率更高的Map,用来替换其他线程安全 ...
- git:将代码提交到远程仓库（码云）
初始化 进入一个任意的文件夹(如D:\aqin_test1\) git init # 初始化,让git将这个文件夹管理起来 git add . # 收集此文件夹下的所有文件 git config -- ...
- ArrayList用法整理
System.Collections.ArrayList类是一个特殊的数组.通过添加和删除元素,就可以动态改变数组的长度. 一．优点 1.支持自动改变大小的功能 2.可以灵活的插入元素 3.可以灵活的 ...
- Json对象转Ts类
一 目标 推荐一款在线将Json对象转换为Ts类的工具:https://apihelper.jccore.cn/jsontool 可以帮助前端开发人员提高开发效率. 二 背景 Json是一种轻量级的数 ...
- JAVA笔记【类】
java的概述和编程基础在这里我就不过多的强调了,因为已经有学习C和C++的基础了,我在这里强调一下类和对象. [一]类的定义: Java类的定义包括类声明和类体两个部分,其中类体又包含变量声明,方法 ...
- Windows上快捷登陆应用程序
在Windows上有些程序双击后,还需要输入用户名密码等,填写很多信息后才开始使用. 有些程序本身实现了保存信息,或者可以自动登陆. 但也有些程序无信息保存和自动登陆功能,如果经常使用,每次都填写觉得 ...
- 章节十六、4-TestNG高级功能--把测试方法分优先级、分组执行
一. 把测试方法分优先级执行----->(priority=索引) 1.新建一个testng方法 package testclasses; import org.testng.annotatio ...