欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

canvas 弹幕效果(实例分享)

程序员文章站 2022-06-20 19:34:11
话不多说,请看代码

话不多说,请看代码

<!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>

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