Of Stack

canvas barrage effect (example sharing)

  • 2021-07-10 18:36:29
  • OfStack

Not much to say, please look at the code 


<!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)"> Your browser does not support 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);// The larger the buffer pool, the more displayed on the screen 
 this.width = 1280;//canvas Resolution 1280*720
 this.height = 720;
 this.canvas.width=this.width;// The above two steps can be omitted and assigned directly here 
 this.canvas.height=this.height;
 this.font = "30px  Blackbody ";// Fonts and font sizes 
 this.ctx.font=this.font;
 // Color array, from which colors are randomly taken during drawing 
 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 () {// Drawing method 
  if (this.interval != "")return;
  var _this=this;
  this.interval = setInterval(function () {// Every interval 20 Millisecond redrawing 1 Times, and the interval is preferably less than 40 Otherwise, the effect will be similar to playing pictures 
  //1 Clear the screen 
  _this.ctx.clearRect(0, 0, _this.width, _this.height);
  _this.ctx.save();
  //2 Loop the buffer area, and set it without setting Left , Top , Speed , Color Assign the value first, and the assigned value will change left Value (to produce a moving effect), left Value less than 200 Is removed from the buffer 
  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);
 };
 // Add data, data format [{"msg":"nihao"}]
 this.putMsg = function (datas) {// Cyclic buffer, loading data with empty position 
  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 () {// Clear the timer, clear the screen, empty the buffer 
  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":" This is from me. . . Ha ha ha "}]);//  Send barrage 
 
 $('canvas').barrager([{"msg":" It looks good. . . . "},{"msg":" Ha ha ha. . . . "},{"msg":" Not bad, not bad. . "},{"msg":" It's beautiful. . . . "}]);// Multiple sending modes 

 // $('canvas').barrager("clear"); // Clear / Close the barrage 
</script>
</html>
Related articles: