canvas 弹幕效果（实例分享）
话不多说，请看代码
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<canvasstyle="width:1280px;height:720px;background-color:rgba(0,0,0,0.2)">你的浏览器不支持canvas</canvas>
</body>
<scriptsrc="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script>
(function($){
functionBarrager(dom){
this.canvas=dom.get(0);
this.ctx=this.canvas.getContext("2d");
this.msgs=newArray(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(vari=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(varj=0;j<datas.length;j++){
for(vari=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(vari=0;i<this.msgs.length;i++){
this.msgs[i]=null;
}
};
}
$.fn.barrager=function(para){
if(typeof(para)=="string"){
try{
varapi=$(this).data('barrager_api');
api[para].apply(api);
}catch(e){}
}elseif(typeofpara=='object'||!para){
$this=$(this);
if($this.data('barrager_api')!=null&&$this.data('barrager_api')!=''){
varapi=$this.data('barrager_api');
api.putMsg(para);
}else{
varapi=newBarrager($this);
$this.data('barrager_api',api);
api.putMsg(para);
}
}else{
$.error('Method'+method+'doesnotexistonjQuery.slidizle');
}
returnthis;
}
})(jQuery);
</script>
<script>
//$('canvas').barrager([{"msg":"这是我发的。。。哈哈哈"}]);//发送弹幕
$('canvas').barrager([{"msg":"看着不错。。。。"},{"msg":"哈哈哈。。。。"},{"msg":"不错不错。。"},{"msg":"真好看。。。。"}]);//多条发送方式
//$('canvas').barrager("clear");//清除/关闭弹幕
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！