簡(jiǎn)介
最近在做大作業(yè)的時(shí)候需要做一個(gè)彈幕播放器。借鑒了一下別人的源碼自己重新實(shí)現(xiàn)了一個(gè)，演示如下
主要的功能有
發(fā)送彈幕
設(shè)置彈幕的顏色，速度和類(lèi)型
顯示彈幕
已知缺陷：
不能全屏
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)畫(huà)，canvas中對(duì)于文字并沒(méi)有很好的動(dòng)畫(huà)支持，只能通過(guò)自己實(shí)現(xiàn)，實(shí)現(xiàn)的思路就是不斷的清屏然后重寫(xiě)文字，當(dāng)清屏重寫(xiě)的頻率達(dá)到24fps的時(shí)候就是流暢的動(dòng)畫(huà)了。
先在HTML文件中添加視頻video標(biāo)簽和畫(huà)布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然后視頻和畫(huà)布就重疊在一起，看起來(lái)就是一個(gè)彈幕播放器了。然后為畫(huà)布添加彈幕相關(guān)的內(nèi)容，首先獲取畫(huà)布的相關(guān)信息和設(shè)置畫(huà)布的字體大小和字體樣式
var c=document.getElementById("cv_video");
//獲取畫(huà)布大小
var c_height=c.height;
var c_width=c.width;
//獲取畫(huà)布
ctx=c.getContext("2d");
//設(shè)置字體樣式
ctx.font="25px DengXian";
畫(huà)布信息已經(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)類(lèi)型和速度，定義了move()方法來(lái)控制彈幕的緩動(dòng)，每出發(fā)一次move()方法向左滾動(dòng)一個(gè)單位speed的像素。
彈幕對(duì)象構(gòu)造完成之后就進(jìn)入到主題，動(dòng)畫(huà)的制作，直接上代碼
//循環(huán)擦寫(xiě)畫(huà)布實(shí)現(xiàn)動(dòng)畫(huà)效果
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í)行一次擦寫(xiě)，ctx.clearRect(0,0,c_width,c_height);是將整張當(dāng)前的畫(huà)布清除，然后使用ctx.save()將當(dāng)前的畫(huà)布保存，接著遍歷彈幕列表(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屬性則將畫(huà)布的寬度賦予它，如果彈幕實(shí)例已經(jīng)退出畫(huà)布則將其置null以節(jié)省內(nèi)存，否則的話就調(diào)用彈幕實(shí)例的move()方法改變left屬性的值，然后設(shè)置文字的顏色，一級(jí)寫(xiě)入新的文字，恢復(fù)畫(huà)布。這樣就完成了一幀動(dòng)畫(huà)。
對(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;
}
}
}
首先將畫(huà)布的基點(diǎn)移動(dòng)到畫(huà)布的中心，需要注意的是這時(shí)候相對(duì)與生成了一張新的畫(huà)布，原來(lái)畫(huà)布的clearRect()方法已經(jīng)不適用與這張畫(huà)布了。然后再設(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屬性的遞減，但不把遞減反映到畫(huà)布中，當(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)畫(huà)，主要用到的方法有
canvasDom.getContext()
canvas.save()/canvas.restore()
canvas.clearRect()
canvas.moveTo()
原來(lái)我對(duì)與save()和restore()是不能理解的，現(xiàn)在我算是有一點(diǎn)理解了，當(dāng)你更改了畫(huà)布狀態(tài)，現(xiàn)在的畫(huà)布就已經(jīng)不是原來(lái)的畫(huà)布，所以在修改畫(huà)布狀態(tài)之前先把畫(huà)布狀態(tài)保存，切換畫(huà)布狀態(tài)，完成工作之后，恢復(fù)為原來(lái)的畫(huà)布狀態(tài)繼續(xù)工作。像我處理靜態(tài)彈幕的時(shí)候，把畫(huà)布的基點(diǎn)改變了，那么原來(lái)畫(huà)布的清除方法就不再適用于當(dāng)前畫(huà)布，只有在當(dāng)前畫(huà)布中自己使用另外的清除方法。然后再恢復(fù)到原來(lái)的畫(huà)布。
可運(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=[];
//獲取畫(huà)布大小
var c_height=c.height;
var c_width=c.width;
//獲取畫(huà)布
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)擦寫(xiě)畫(huà)布實(shí)現(xiàn)動(dòng)畫(huà)效果
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)站的支持！
