java实现弹幕效果_canvas 弹幕效果（实例分享）

话不多说，请看代码

Document

你的浏览器不支持canvas

(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 = setIntervaXRxKKgs[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

_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);

};

//添加数据，数据格式http://www.cppcns.com''){

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);

// $('canvas').barrager([{"msg":"这是我发的。。。哈哈哈"}]);// 发送弹幕

$('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好看。。。。"}]);//多条发送方式

// $('canvas').barrager("clear"); //清除/关闭弹幕