canvas 弹幕效果(实例分享)


Posted in Javascript onJanuary 11, 2017

话不多说,请看代码

<!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);
 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);
</script>
<script>
 // $('canvas').barrager([{"msg":"这是我发的。。。哈哈哈"}]);// 发送弹幕
 
 $('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好看。。。。"}]);//多条发送方式

 // $('canvas').barrager("clear"); //清除/关闭弹幕
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 Javascript
ejs v9 javascript模板系统
Mar 21 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
JQuery实现动态操作表格
Jan 11 #Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 #Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 #Javascript
Vue数据驱动模拟实现2
Jan 11 #Javascript
jQuery实现对象转为url参数的方法
Jan 11 #Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 #Javascript
移动端界面的适配
Jan 11 #Javascript
You might like
php实现的MySQL通用查询程序
2007/03/11 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
快速排序 php与javascript的不同之处
2011/02/22 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
详解JavaScript 浮点数运算的精度问题
2019/07/23 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
利用python绘制正态分布曲线
2021/01/04 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
本科毕业生专业自荐书范文
2014/02/05 职场文书
2014村务公开实施方案
2014/02/25 职场文书
公司业务员岗位职责
2014/03/18 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
英语教师求职信
2014/06/16 职场文书
单位作风建设自查报告
2014/10/23 职场文书
学生违反校规检讨书
2014/10/28 职场文书
师范生见习报告
2014/10/31 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python