話不多說，請看代碼
<!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>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
