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 相关文章推荐
Packer 3.0 JS压缩及混淆工具 下载
May 03 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
js字符编码函数区别分析
Dec 28 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
javascript的push使用指南
Dec 05 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
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时区转换转换函数
2014/01/07 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
再论Javascript的类继承
2011/03/05 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Python中http请求方法库汇总
2016/01/06 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python cookbook(数据结构与算法)实现对不原生支持比较操作的对象排序算法示例
2018/03/15 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
如何开启linux的ssh服务
2015/02/14 面试题
转党组织关系介绍信
2014/01/08 职场文书
婚礼主持词开场白
2014/03/13 职场文书
高一学生期末评语
2014/04/25 职场文书
文明村镇申报材料
2014/05/06 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
大学生学习新党章思想汇报
2014/10/25 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
52条SQL语句教你性能优化
2021/05/25 MySQL
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python