├── demo.zip
├── README.md
└── jquery.barrager.js


/demo.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Sailiy/JBarrager/HEAD/demo.zip


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 重要
 2 | 该弹幕库已经使用TypeScript重构，支持NPM安装
 3 | 
 4 | github地址：https://github.com/Sailiy/Danmaku-Plus
 5 | 
 6 | npm仓库地址：https://www.npmjs.com/package/danmaku-plus
 7 | 
 8 | # JBarrager
 9 | 项目地址：http://www.rainx.org/2016/12/22/html5-canvas%E5%AE%9E%E7%8E%B0%E9%AB%98%E5%B9%B6%E5%8F%91%E8%A7%86%E9%A2%91%E5%BC%B9%E5%B9%95%E5%8A%9F%E8%83%BD/
10 | 
11 | 调用方式：
12 | <pre>
13 | html部分代码：
14 | &lt;canvas style="width: 1280px;height: 720px;background-color: rgba(0,0,0,0.2)"&gt;你的浏览器不支持canvas&lt;/canvas&gt;
15 | 
16 | 发送单条弹幕：
17 | $('canvas').barrager([{"msg":"这是我发的。。。哈哈哈"}]);
18 | 多条发送方式：
19 | $('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好看。。。。"}]);
20 | 清除/关闭弹幕：
21 | $('canvas').barrager("clear");
22 | 
23 | 在实际应用，可以通过ajax方式轮询异步获取数据，通过上述语句发送弹幕
24 | 如果这个插件帮到了你，希望能给我一个star
25 | </pre>
26 | 


--------------------------------------------------------------------------------
/jquery.barrager.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  *@作者：  赵玉
 3 |  *@邮箱：  sailiy@126.com
 4 |  *@公司：  彩虹世纪文化传媒有限公司
 5 |  *@项目：  jquery.barrager.js
 6 |  */
 7 | (function ($) {
 8 |     function Barrager(dom) {
 9 |         this.canvas = dom.get(0);
10 |         this.ctx = this.canvas.getContext("2d");
11 |         this.msgs = new Array(300);
12 |         this.width = 1280;
13 |         this.height = 720;
14 |         this.canvas.width=this.width;
15 |         this.canvas.height=this.height;
16 |         this.font = "30px 黑体";
17 |         this.ctx.font=this.font;
18 |         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"];
19 |         this.interval = "";
20 |         this.draw = function () {
21 |             if (this.interval != "")return;
22 |             var _this=this;
23 |             this.interval = setInterval(function () {
24 |                 _this.ctx.clearRect(0, 0, _this.width, _this.height);
25 |                 _this.ctx.save();
26 |                 for (var i = 0; i < _this.msgs.length; i++) {
27 |                     if (!(_this.msgs[i] == null || _this.msgs[i] == "" || typeof(_this.msgs[i]) == "undefined")) {
28 |                         if(_this.msgs[i].L==null || typeof(_this.msgs[i].L)=="undefined"){
29 |                             _this.msgs[i].L=_this.width;
30 |                             _this.msgs[i].T=parseInt(Math.random() * 700);
31 |                             _this.msgs[i].S=parseInt(Math.random() * (10 - 4) + 4);
32 |                             _this.msgs[i].C=_this.colorArr[Math.floor(Math.random() * _this.colorArr.length)];
33 |                         }else{
34 |                             if(_this.msgs[i].L<-200){
35 |                                 _this.msgs[i]=null;
36 |                             }else {
37 |                                 _this.msgs[i].L=parseInt(_this.msgs[i].L-_this.msgs[i].S);
38 |                                 _this.ctx.fillStyle =_this.msgs[i].C;
39 |                                 _this.ctx.fillText(_this.msgs[i].msg,_this.msgs[i].L,_this.msgs[i].T);
40 |                                 _this.ctx.restore();
41 |                             }
42 |                         }
43 |                     }
44 |                 }
45 |             }, 20);
46 |         };
47 |         this.putMsg = function (datas) {
48 |             for (var j = 0; j < datas.length; j++) {
49 |                 for (var i = 0; i < this.msgs.length; i++) {
50 |                     if (this.msgs[i] == null || this.msgs[i] == "" || typeof(this.msgs[i]) == "undefined") {
51 |                         this.msgs[i] = datas[j];
52 |                         break;
53 |                     }
54 |                 }
55 |             }
56 |             this.draw();
57 |         };
58 |         this.clear = function () {
59 |             clearInterval(this.interval);
60 |             this.interval="";
61 |             this.ctx.clearRect(0, 0, this.width, this.height);
62 |             this.ctx.save();
63 |             for(var i=0;i<this.msgs.length;i++){
64 |                 this.msgs[i]=null;
65 |             }
66 |         };
67 |     }
68 | 
69 |     $.fn.barrager = function (para) {
70 |         if (typeof(para)=="string") {
71 |             try{
72 |                 var api = $(this).data('barrager_api');
73 |                 api[para].apply(api);
74 |             }catch (e){}
75 |         } else if (typeof para == 'object' || !para) {
76 |             $this = $(this);
77 |             if ($this.data('barrager_api') != null && $this.data('barrager_api') != ''){
78 |                 var api = $this.data('barrager_api');
79 |                 api.putMsg(para);
80 |             }else{
81 |                 var api = new Barrager($this);
82 |                 $this.data('barrager_api', api);
83 |                 api.putMsg(para);
84 |             }
85 |         } else {
86 |             $.error('Method ' + method + ' does not exist on jQuery.barrager');
87 |         }
88 |         return this;
89 |     }
90 | })(jQuery);


--------------------------------------------------------------------------------