So implementieren Sie HTML zur Implementierung der Scroll-Sperrfunktion

Dieses Mal zeige ich Ihnen, wie Sie HTML verwenden, um die Scroll-Barrage-Funktion zu implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Scroll-Barrage-Funktion in HTML? ist ein praktischer Fall.

Die Hauptfunktionen sind: Sperrfeuer senden, Farbe, Geschwindigkeit und Art der Sperrfeuer einstellen und Sperrfeuer anzeigen

Bekannte Mängel: Kann nicht im Vollbildmodus angezeigt werden

Canvas wird nicht automatisch angezeigt -do Anpassung
Keine benutzerdefinierten Player-Steuerelemente
Es werden keine entsprechenden Sperrfeuer entsprechend der Wiedergabezeit angezeigt
Sperrfeuer können nicht verschoben werden
Bekannte Mängel werden in Zukunft behoben. Die im Internet zu findenden Quellcodes von Barrage-Playern machen im Allgemeinen nur rollendes Barrage und kein statisches Barrage. Hier habe ich speziell die Implementierung von statischem Barrage hinzugefügt.

Canvas zeichnet Text und Text-Scroll-Effekt

Der Kern des gesamten Players besteht darin, Text zu zeichnen und Text-Scrolling zu animieren. Es gibt keine gute Animationsunterstützung für Text in Canvas und Sie können ihn nur verwenden Wenn die Häufigkeit des Löschens und Neuschreibens des Bildschirms 24 fps erreicht, ist die Animation flüssig.

Fügen Sie zuerst das Video-Video-Tag und das Canvas-Tag in der HTML-Datei hinzu.

<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>

Stellen Sie den Positionsstil des Canvas-Tags auf „position:absolute“ ein. Anschließend werden das Video und die Leinwand angezeigt Wenn man sie überlappt, sieht es aus wie ein Sperrfeuerspieler. Fügen Sie dann der Leinwand Inhalte hinzu, die sich auf Sperrfeuer beziehen. Rufen Sie zunächst die relevanten Informationen zur Leinwand ab und legen Sie die Schriftgröße und den Schriftstil der Leinwand fest.

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;
            }
        }
    }
}

Das erstellte Sperrobjekt initialisiert verschiedene Parameter, einschließlich des Inhalts , Farbe, Bewegungstyp und Geschwindigkeit: Die Methode move() ist so definiert, dass sie die Abschwächung des Sperrfeuers steuert. Jedes Mal, wenn die Methode move() gestartet wird, scrollt sie um ein Pixel der Einheitsgeschwindigkeit nach links.

Nachdem die Konstruktion des Sperrobjekts abgeschlossen ist, geben Sie das Thema und die Animationsproduktion ein und geben Sie den Code direkt ein.

//循环擦写画布实现动画效果
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)

Erase wird alle 20 ms ausgeführt, ctx.clearRect(0,0,c_width,c_height ); Es löscht die gesamte aktuelle Leinwand, speichert dann mit ctx.save() die aktuelle Leinwand und durchläuft dann die Sperrliste (msgs ist die Sperrliste. Jedes Mal, wenn eine Sperrschicht gesendet wird, wird die Sperrinstanz hinzugefügt Liste) und verarbeiten Sie sie dann separat entsprechend dem Standard-Sperrstil oder dem statischen Sperrstil. Wenn es sich um eine Barrage des Standardstils handelt, wird sie mit der folgenden Methode verarbeitet:

//处理默认弹幕样式
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();
        }
    } 
}

Wenn für die Barrage-Instanz zunächst nicht das linke Attribut festgelegt ist, wird die Breite der Leinwand angegeben Wenn die Barrage-Instanz die Leinwand verlassen hat, wird sie auf Null gesetzt, um Speicher zu sparen. Andernfalls rufen Sie die move()-Methode der Barrage-Instanz auf, um den Wert des linken Attributs zu ändern, und legen dann die Farbe des Texts fest. Schreiben Sie neu Text auf der ersten Ebene hinzufügen und die Leinwand wiederherstellen. Damit ist ein Frame der Animation abgeschlossen.

Die Implementierungsmethode für statisches Sperrfeuer ist wie folgt

//处理静止弹幕样式
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;
        }
    }
}

Verschieben Sie zunächst den Basispunkt der Leinwand in die Mitte der Leinwand. Es ist zu beachten, dass eine neue Leinwand generiert wird Diesmal ist die ursprüngliche Methode „clearRect()“ der Leinwand nicht mehr auf diese Leinwand anwendbar. Stellen Sie dann die Textausrichtung auf zentrierte Ausrichtung ein, legen Sie den

Textstil fest und füllen Sie den Text aus. Da das Sperrfeuer statisch ist, besteht keine Notwendigkeit, es zu lockern, aber auch das statische Sperrfeuer verschwindet. Sie müssen ein Flag setzen, damit es regelmäßig verschwindet. Um hier keine zusätzlichen Attribute zu belegen, verwenden wir das linke Attribut direkt als Flag. Wir dekrementieren auch das linke Attribut, spiegeln die Verringerung jedoch nicht im Canvas wider. Wenn left den Schwellenwert erreicht, verwenden wir die Methode ctx.clearRect() um das Sperrfeuer zu beseitigen. Auf diese Weise wird die Verarbeitung statischer Sperrfeuer realisiert.

Andere Leute, die über gewisse Kenntnisse im Festlegen von Farben und Stilen verfügen, sollten es leicht beherrschen. Ich werde es hier nicht im Detail vorstellen und es selbst verstehen.

Zusammenfassung

Dieses Projekt verwendet hauptsächlich Leinwand zum Zeichnen von Text und zur Textbeschleunigung. Die wichtigsten verwendeten Methoden sind

canvasDom.getContext()
canvas.save()/canvas.restore()
canvas.clearRect()
canvas.moveTo()

Ursprünglich Ich konnte Save () und Restore () nicht verstehen, aber jetzt habe ich ein wenig Verständnis. Wenn Sie den Canvas-Status ändern, ist die aktuelle Canvas nicht mehr die ursprüngliche Canvas. Wenn Sie also die Canvas ändern, speichern Sie sie Canvas-Status und Wechseln des Canvas-Status. Kehren Sie nach Abschluss der Arbeit zum ursprünglichen Canvas-Status zurück und arbeiten Sie weiter. Wenn ich beispielsweise mit statischen Sperren umgehe und den Basispunkt der Leinwand ändere, gilt die ursprüngliche Methode zum Löschen der Leinwand nicht mehr für die aktuelle Leinwand und ich kann nur eine andere Löschmethode für die aktuelle Leinwand verwenden. Kehren Sie dann zur ursprünglichen Leinwand zurück.

Ausführbarer Code

<!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="请输入弹幕内容"/>
            <button id="send"> 发送</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">默认
            <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(&#39;click&#39;,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;
            }
        })
        //处理发送弹幕
        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);
        }
        //
        //弹幕功能部分代码
        //
        //弹幕对象
        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;
                    }
                }
            }
        }
        //循环擦写画布实现动画效果
        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)
    //处理默认弹幕样式
    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>

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So fügen Sie ein Video in eine HTML-Webseite ein

So erstellen Sie ein HTML-Textfeld Nur-Lese-Effekt

So verwenden Sie HTML+CSS, um die sekundäre Menüleiste anzuzeigen, indem Sie mit der Maus darüber wischen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie HTML zur Implementierung der Scroll-Sperrfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!