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 相关文章推荐
Web版彷 Visual Studio 2003 颜色选择器
Jan 09 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
字符串反转_JavaScript
Apr 28 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
JS作用域链详解
Jun 26 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
js实现下拉框二级联动
Dec 04 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 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数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
2013/04/22 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
vue中多个倒计时实现代码实例
2019/03/27 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python中函数参数匹配模型详解
2019/06/09 Python
详解用python生成随机数的几种方法
2019/08/04 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
CSS3实现渐变背景兼容问题
2020/05/06 HTML / CSS
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
公司周年庆典邀请函
2014/01/12 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
小学数学教师研修日志
2015/11/13 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
python中的3种定义类方法
2021/11/27 Python