簡(jiǎn)介
最近在做大作業(yè)的時(shí)候需要做一個(gè)彈幕播放器。借鑒了一下別人的源碼自己重新實(shí)現(xiàn)了一個(gè)，演示如下
主要的功能有
發(fā)送彈幕
設(shè)置彈幕的顏色，速度和類型
顯示彈幕
已知缺陷：
不能全屏
canvas沒(méi)有做自適應(yīng)
沒(méi)有自定義播放器控件
沒(méi)有根據(jù)播放時(shí)間顯示相應(yīng)的彈幕
彈幕不能實(shí)現(xiàn)懸停
已知的缺陷以后會(huì)進(jìn)行改進(jìn)。網(wǎng)上能找到的彈幕播放器的源碼一般只做了滾動(dòng)的彈幕而沒(méi)有做靜止的彈幕，這里我特意加上了靜止彈幕的實(shí)現(xiàn)。
Canvas繪制文字以及文字滾動(dòng)效果
整個(gè)播放器的核心就是繪制文字以及做文字滾動(dòng)的動(dòng)畫，canvas中對(duì)于文字并沒(méi)有很好的動(dòng)畫支持，只能通過(guò)自己實(shí)現(xiàn)，實(shí)現(xiàn)的思路就是不斷的清屏然后重寫文字，當(dāng)清屏重寫的頻率達(dá)到24fps的時(shí)候就是流暢的動(dòng)畫了。
先在HTML文件中添加視頻video標(biāo)簽和畫布canvas標(biāo)簽
<div id="barrageplayer"> <canvas id="cv_video" width="900px" height="450px"></canvas> <video id="v_video" src="test.MP4" controls type="video/mp4"></video></div>
把canvas標(biāo)簽的位置樣式設(shè)置為position:absolute然后視頻和畫布就重疊在一起，看起來(lái)就是一個(gè)彈幕播放器了。然后為畫布添加彈幕相關(guān)的內(nèi)容，首先獲取畫布的相關(guān)信息和設(shè)置畫布的字體大小和字體樣式
var c=document.getElementById("cv_video");//獲取畫布大小var c_height=c.height;var c_width=c.width;//獲取畫布ctx=c.getContext("2d");//設(shè)置字體樣式ctx.font="25px DengXian";畫布信息已經(jīng)獲取和設(shè)置，巧婦難為無(wú)米之炊，接著我們就要構(gòu)造彈幕對(duì)象，使用的構(gòu)造模式是動(dòng)態(tài)原型模式//彈幕對(duì)象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; } } }}構(gòu)造的彈幕對(duì)象初始化了各種參數(shù)，包括內(nèi)容，顏色，運(yùn)動(dòng)類型和速度，定義了move()方法來(lái)控制彈幕的緩動(dòng)，每出發(fā)一次move()方法向左滾動(dòng)一個(gè)單位speed的像素。
彈幕對(duì)象構(gòu)造完成之后就進(jìn)入到主題，動(dòng)畫的制作，直接上代碼
//循環(huán)擦寫畫布實(shí)現(xiàn)動(dòng)畫效果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)每20ms執(zhí)行一次擦寫，ctx.clearRect(0,0,c_width,c_height);是將整張當(dāng)前的畫布清除，然后使用ctx.save()將當(dāng)前的畫布保存，接著遍歷彈幕列表(msgs是彈幕列表，當(dāng)每發(fā)送一條彈幕都會(huì)將該彈幕實(shí)例添加到列表中)，然后按照默認(rèn)樣式的彈幕還是靜止樣式的彈幕分別處理。如果是默認(rèn)樣式的彈幕將會(huì)按照以下的方法處理
//處理默認(rèn)彈幕樣式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(); } } }
首先如果彈幕實(shí)例沒(méi)有設(shè)置left屬性則將畫布的寬度賦予它，如果彈幕實(shí)例已經(jīng)退出畫布則將其置null以節(jié)省內(nèi)存，否則的話就調(diào)用彈幕實(shí)例的move()方法改變left屬性的值，然后設(shè)置文字的顏色，一級(jí)寫入新的文字，恢復(fù)畫布。這樣就完成了一幀動(dòng)畫。
對(duì)于靜止彈幕的實(shí)現(xiàn)方法如下
//處理靜止彈幕樣式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; } }}首先將畫布的基點(diǎn)移動(dòng)到畫布的中心，需要注意的是這時(shí)候相對(duì)與生成了一張新的畫布，原來(lái)畫布的clearRect()方法已經(jīng)不適用與這張畫布了。然后再設(shè)置文字對(duì)齊為居中對(duì)齊，設(shè)置文字樣式，填充文字。因?yàn)閺椖皇庆o止的所以不需要進(jìn)行緩動(dòng)，但是靜止彈幕也是會(huì)消失的，需要設(shè)置一個(gè)標(biāo)志位來(lái)使他定時(shí)消失。在這里為了不占用額外的屬性，我們直接使用left屬性作為標(biāo)志位，同樣進(jìn)行l(wèi)eft屬性的遞減，但不把遞減反映到畫布中，當(dāng)left達(dá)到閾值，則使用ctx.clearRect()方法將彈幕清除。這樣就實(shí)現(xiàn)了靜止彈幕的處理。
其他關(guān)于顏色，樣式的設(shè)置有一定基礎(chǔ)的人應(yīng)該是很容易掌握的在這里就不多介紹了,自己看可運(yùn)行代碼部分理解一下就好。
總結(jié)
這個(gè)項(xiàng)目主要是使用了canvas進(jìn)行文字繪制以及實(shí)現(xiàn)文字的緩動(dòng)動(dòng)畫，主要用到的方法有
canvasDom.getContext()canvas.save()/canvas.restore()canvas.clearRect()canvas.moveTo()
原來(lái)我對(duì)與save()和restore()是不能理解的，現(xiàn)在我算是有一點(diǎn)理解了，當(dāng)你更改了畫布狀態(tài)，現(xiàn)在的畫布就已經(jīng)不是原來(lái)的畫布，所以在修改畫布狀態(tài)之前先把畫布狀態(tài)保存，切換畫布狀態(tài)，完成工作之后，恢復(fù)為原來(lái)的畫布狀態(tài)繼續(xù)工作。像我處理靜態(tài)彈幕的時(shí)候，把畫布的基點(diǎn)改變了，那么原來(lái)畫布的清除方法就不再適用于當(dāng)前畫布，只有在當(dāng)前畫布中自己使用另外的清除方法。然后再恢復(fù)到原來(lái)的畫布。
可運(yùn)行代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><style type="text/css"> .pickdiv{ width: 30px; height: 30px; cursor: pointer; border: 2px solid gray; display: inline-block; } #white{ background: white; } #red{ background:#ff6666; } #yellow{ background:#ffff00; } #blue{ background:#333399; } #green{ background:#339933; } #cv_video{ position: absolute; z-index: 1; } #barrageplayer{ position: relative; display: block; width: 900px; height: 500px; } #v_video{ position: absolute; width: 100%; height: 100%; z-index: 0; }</style><body> <div id="barrageplayer"> <canvas id="cv_video" width="900px" height="450px"></canvas> <video id="v_video" src="test.MP4" controls type="video/mp4"></video> </div> <div id="barrageinput"> <div> <input type="text" id="smsg" placeholder="請(qǐng)輸入彈幕內(nèi)容"/> <button id="send"> 發(fā)送</button> </div> <div id="colorpick"> <div class="pickdiv" id="white"></div> <div class="pickdiv" id="red"></div> <div class="pickdiv" id="yellow"></div> <div class="pickdiv" id="blue"></div> <div class="pickdiv" id="green"></div> </div> <div id="typepick"> <input type="radio" name="type" value="default">默認(rèn) <input type="radio" name="type" value="static top">靜止頂部 <input type="radio" name="type" value="static bottom">靜止底部 </div> <div id="speedpick"> <input type="radio" name="speed" value="1">1X <input type="radio" name="speed" value="2">2X <input type="radio" name="speed" value="3">3X </div> <div id="stylepick"></div> </div> <script> var c=document.getElementById("cv_video"); var typeDom=document.getElementsByName("type"); var speedDom=document.getElementsByName("speed"); var colorpick=document.getElementById("colorpick"); var smsg=document.getElementById("smsg"); var color="#white"; var speed=1; var type="default"; var msgs=[]; //獲取畫布大小 var c_height=c.height; var c_width=c.width; //獲取畫布 ctx=c.getContext("2d"); ctx.font="25px DengXian"; //處理顏色選擇 colorpick.addEventListener('click',function(event){ switch(event.target.id){ case "white": color="white"; break; case "red": color="#ff6666"; break; case "yellow": color="#ffff00"; break; case "green": color="#339933"; break; case "blue": color="#333399"; break; } }) //處理發(fā)送彈幕 document.getElementById("send").onclick=function(){ var text=smsg.value; for(var i=0;i<typeDom.length;i++){ if(typeDom[i].checked){ type=typeDom[i].value; break; } } for(var i=0;i<speedDom.length;i++){ if(speedDom[i].checked){ speed=2*parseInt(speedDom[i].value); break; } } var tempBarrage=new Barrage(text,color,type,speed); msgs.push(tempBarrage); } // //彈幕功能部分代碼 // //彈幕對(duì)象 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; } } } } //循環(huán)擦寫畫布實(shí)現(xiàn)動(dòng)畫效果 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) //處理默認(rèn)彈幕樣式 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(); } } } //處理靜止彈幕樣式 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; } } } </script></body></html>以上所述是小編給大家介紹的HTML使用canvas實(shí)現(xiàn)彈幕功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
