canvas 弹幕效果（实例分享）

话不多说，请看代码
<！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*720this.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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！