主頁 > 知識(shí)庫 > HTML使用canvas實(shí)現(xiàn)彈幕功能

HTML使用canvas實(shí)現(xiàn)彈幕功能

熱門標(biāo)簽:朝陽自動(dòng)外呼系統(tǒng) 昌邑外呼系統(tǒng) 地圖標(biāo)注地點(diǎn)下載 400電話辦理尚景 商丘電話自動(dòng)外呼系統(tǒng)怎么收費(fèi) 周口導(dǎo)航地圖標(biāo)注 東莞人工外呼系統(tǒng)多少錢 默納克系統(tǒng)外呼顯示inns 400電話是在哪里申請(qǐng)

簡介

 最近在做大作業(yè)的時(shí)候需要做一個(gè)彈幕播放器。借鑒了一下別人的源碼自己重新實(shí)現(xiàn)了一個(gè),演示如下

主要的功能有

發(fā)送彈幕
設(shè)置彈幕的顏色,速度和類型
顯示彈幕
 

已知缺陷:

不能全屏

canvas沒有做自適應(yīng)
沒有自定義播放器控件
沒有根據(jù)播放時(shí)間顯示相應(yīng)的彈幕
彈幕不能實(shí)現(xiàn)懸停
已知的缺陷以后會(huì)進(jìn)行改進(jìn)。網(wǎng)上能找到的彈幕播放器的源碼一般只做了滾動(dòng)的彈幕而沒有做靜止的彈幕,這里我特意加上了靜止彈幕的實(shí)現(xiàn)。

Canvas繪制文字以及文字滾動(dòng)效果

 整個(gè)播放器的核心就是繪制文字以及做文字滾動(dòng)的動(dòng)畫,canvas中對(duì)于文字并沒有很好的動(dòng)畫支持,只能通過自己實(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然后視頻和畫布就重疊在一起,看起來就是一個(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è)置,巧婦難為無米之炊,接著我們就要構(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()方法來控制彈幕的緩動(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í)例沒有設(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ì)與生成了一張新的畫布,原來畫布的clearRect()方法已經(jīng)不適用與這張畫布了。然后再設(shè)置文字對(duì)齊為居中對(duì)齊,設(shè)置文字樣式,填充文字。因?yàn)閺椖皇庆o止的所以不需要進(jìn)行緩動(dòng),但是靜止彈幕也是會(huì)消失的,需要設(shè)置一個(gè)標(biāo)志位來使他定時(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()

原來我對(duì)與save()和restore()是不能理解的,現(xiàn)在我算是有一點(diǎn)理解了,當(dāng)你更改了畫布狀態(tài),現(xiàn)在的畫布就已經(jīng)不是原來的畫布,所以在修改畫布狀態(tài)之前先把畫布狀態(tài)保存,切換畫布狀態(tài),完成工作之后,恢復(fù)為原來的畫布狀態(tài)繼續(xù)工作。像我處理靜態(tài)彈幕的時(shí)候,把畫布的基點(diǎn)改變了,那么原來畫布的清除方法就不再適用于當(dāng)前畫布,只有在當(dāng)前畫布中自己使用另外的清除方法。然后再恢復(fù)到原來的畫布。

可運(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ì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

標(biāo)簽:阿拉善盟 湖南 健身房 福建 沈陽 銅陵 揭陽 那曲

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML使用canvas實(shí)現(xiàn)彈幕功能》,本文關(guān)鍵詞  HTML,使用,canvas,實(shí)現(xiàn),彈幕,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《HTML使用canvas實(shí)現(xiàn)彈幕功能》相關(guān)的同類信息!
  • 本頁收集關(guān)于HTML使用canvas實(shí)現(xiàn)彈幕功能的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章