嘿各位，今天咱来聊个好玩的话题，那就是弹幕播放器的源代码。那些网上找得到的源代码大多只有滚动的弹幕功能，不过，我给它加了静止弹幕的功能~
为啥要有静止弹幕？这问题可不小！别小瞧了它，它实际上能帮咱们更好地展示字面信息。想想，光有滚动弹幕的话，重要的东西还不得被忽视掉呀。
var c=document.getElementById("cv_video");
//获取画布大小
var c_height=c.height;
var c_width=c.width;
//获取画布
ctx=c.getContext("2d");
//设置字体样式
ctx.font="25px DengXian";
画布信息已经获取和设置，巧妇难为无米之炊，接着我们就要构造弹幕对象，使用的构造模式是动态原型模式
//弹幕对象
function Barrage(content,color,type,speed){
this.content=content;
this.color=color;
this.type=type;
this.speed=speed;
if(this.type=="default"){
this.height=parseInt(Math.random()*c_height)+10;
}else if (this.type=="static top"){
this.height=parseInt((c_height/2)-Math.random()*c_height/2)+10;
}else if (this.type=="static bottom"){
this.height=parseInt((c_height/2)+Math.random()*c_height/2)+10;
}
if(typeof this.move!="function"){
Barrage.prototype.move=function(){
if(this.type=="default"){
this.left=this.left-this.speed;
}
}
}
}
那咋办？我这儿有个超绝妙的主意可以告诉你！首先得明白，整个播放器里最关键的部分其实是画字和字幕的过场动画。不过可惜，在canvas里面对文字的动画支持不行。怎么办？咱们就得自己动手！其实很简单，换句话说就是不停地刷新屏幕再重新写字就行了！只要刷新的速度能达到每秒钟24下（业界标准），就也能享受到流畅的动画效果！
下面说一下新问题：你觉得怎么样才能让弹幕播放器变得更像真的播放器？我这儿有个点子绝对能让你眼前一亮！只需把canvas标签的位置设成绝对定位，那么视频和画布就能叠加在一起。这样一改，不就跟真正的弹幕播放器一样！
//循环擦写画布实现动画效果
setInterval(function(){
ctx.clearRect(0,0,c_width,c_height);
ctx.save();
for(var i=0;i<msgs.length;i++){
if(msgs[i]!=null){
if(msgs[i].type=="default"){
handleDefault(msgs[i]);
}else{
handleStatic(msgs[i]);
}
}
}
},20)
知道么，做弹幕还挺复杂的，得考虑好多东西！比如内容啊、颜色啊、运动方式和速度啦什么的，还有那个control move()的方法，每次用它，弹幕就能拉近一点点了。
//处理默认弹幕样式
function handleDefault(barrage){
if(barrage.left==undefined||barrage.left==null){
barrage.left=c.width;
}else{
if(barrage.left<-200){
barrage=null;
}else{
barrage.move()
ctx.fillStyle=barrage.color;
ctx.fillText(barrage.content,barrage.left,barrage.height)
ctx.restore();
}
}
}
你知道吗？做动画时擦写真的很关键！每个20毫秒我们就得擦一下屏幕（用ctx.clearRect(0,0,c_width,c_height)把绘画区域整个清了）。然后，咱们就要去找那个正在滚动的弹幕列表了（msg就是弹幕列表，每发一次弹幕，这份长长的list里就多了一个实例）。
来聊聊下一个话题。你们知不知道？这些弹幕虽然不动，但是也会消失的！所以咱们得设个时间点来借助它消失。这次不借用多余属性了，就直接用左边这个位置做标记。跟之前一样，我们要让左移，但是不会改变画布。等到了某个程度，咱们就用ctx.clearRect()函数清理掉弹幕。
//处理静止弹幕样式
function handleStatic(barrage){
ctx.moveTo(c_width/2,barrage.height);
ctx.textAlign="center";
ctx.fillStyle=barrage.color;
ctx.fillText(barrage.content,c_width/2,barrage.height);
if(barrage.left==undefined||barrage.left==null){
barrage.left=c.width;
}else{
if(barrage.left<-200){
ctx.fillText("",c_width/2,barrage.height);
barrage=null;
//ctx.restore();
ctx.clearRect(0,0,c_width,c_height);
}else{
barrage.left=barrage.left-6;
}
}
}
问题搞定！下面我来说说答案！这个项目主要是用canvas来画字，还可以做文字的动画。关键就是要用到save()和restore()。起初这俩方法有点儿费劲，不过现在我好像明白点儿了！每次调整画布后，原有的画布就没了。所以要提前存个档。换个画布，做完事再变回来，就这么简单！今天就聊到这儿！希望你们能从中学到有益的东西。要是对弹幕播放器感兴趣的话，自己动手试试！别忘了留下评价，咱们一起探讨一下！喜欢的话，点个赞分享一波也行
评论0