canvas 弹幕效果（实例分享）

2024-12-03 20:12:07

话不多说，请看代码

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

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

简单实现jQuery弹幕效果

在要写一个弹幕案例的时候,首先要清楚每一步要干什么. 首先搭好框架之后在要发送弹幕时应该准备进行如下步骤: 获取到要发送到弹幕上的内容,即获取到文本框输入的内容.通过jquery的var str = $("#文本框的id").val(); 生成一个元素:利用jQuery的 var createSpan =$("")生成一个span元素,以便发送. 给刚创建的span赋值,即获取到的文本框中的值 createSpan.text(str ); 设置元素的动画效果,是元素
JQuery和HTML5 Canvas实现弹幕效果

JQuery和HTML5 Canvas两种方法实现弹幕效果: 方法一,JQuery实现. 源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
又一枚精彩的弹幕效果jQuery实现

简易弹幕效果:将发布的内容随机显示在弹幕右侧,逐渐左移最后消失. 涉及知识点:val().random().height().css().append().remove()等,主要是元素的操作 html代码: <a href="#">弹幕技术</a> <div class="mask"> <a href="#" class="button">X</a> </di
基于JavaScript实现弹幕特效

本文实例为大家分享了js实现弹幕特效的具体代码,供大家参考,具体内容如下此处使用HBuilder编译,最简单的弹幕效果,希望各位前辈不吝指教. 注意用的是jquery-2.0.3.js <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css&
终于实现了!精彩的jquery弹幕效果

本文实例为大家分享了jquery弹幕效果,供大家参考,具体内容如下页面效果如下: html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
JavaScript直播评论发弹幕切图功能点集合效果代码

一.代码 html+js <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>数发直播平台</title> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="styl
基于jQuery实现弹幕APP

今天闲着无聊,写了个弹幕APP,主要实现以下几个功能: 1.点击"弹幕发射"或回车可以输出弹幕到弹幕墙上. 2.弹幕的运行轨迹是从弹幕墙的最右边到最左边,Y轴的数值在弹幕墙的高度内随机,颜色HEX随机,速度随机. 3.右侧的表格可以储存弹幕内容以及弹幕的发射时间,越靠近现在的越靠前. 4.点击"清除弹幕"可以把弹幕墙内的所有弹幕清除掉,但不会影响到表格中的数据. 5.如果弹幕长度过长(我设置的是6个字符),则超过规定长度之外的弹幕内容都会由"...&quo
基于jquery实现弹幕效果

用js写的一个弹幕效果图: 源码: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"&
jQuery实现弹幕效果

效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #wrap{ width:800px; height:550px; background:#E9E8E8; margin:0 auto; position:relative;
简单实现JavaScript弹幕效果

不知大家有没有感受到,弹幕又是另一出好戏!! 不过我个人还是比较排斥看电视的时候被出来的弹幕打扰.今天我们来写一个简单的弹幕.简单到什么程度呢?看下效果: 由图可以看出,我们的呆毛html结构确实是非常简单啦. 就是由一个div.一个input框另加一个button组成. <div id="box" class="box"></div> <input type="text" id="txt" /&

canvas 弹幕效果（实例分享）

相关推荐

随机推荐