Comment utiliser HTML pour implémenter la fonction de barrage de défilement

Cette fois, je vais vous montrer comment utiliser HTML pour implémenter la fonction de barrage roulant Quelles sont les précautions pour implémenter la fonction de barrage roulant en HTML ? les cas pratiques.

Les principales fonctions sont : envoyer des barrages, définir la couleur, la vitesse et le type des barrages, afficher les barrages

Défauts connus : ne peut pas être en plein écran

le canevas ne fonctionne pas automatiquement - Adaptation
Aucun contrôle de joueur personnalisé
Aucun barrage correspondant n'est affiché en fonction du temps de lecture
Les barrages ne peuvent pas être survolés
Les défauts connus seront améliorés à l'avenir. Le code source des joueurs de barrage que l'on peut trouver sur Internet ne fait généralement que des barrages roulants et non des barrages statiques. Ici, j'ai spécialement ajouté l'implémentation du barrage statique.

Canvas dessine du texte et un effet de défilement de texte

Le cœur de l'ensemble du lecteur est de dessiner du texte et d'animer le défilement de texte. Il n'existe pas de bon support d'animation pour le texte dans Canvas, et vous ne pouvez l'utiliser que. Réalisation par vous-même, l'idée de la mise en œuvre est d'effacer continuellement l'écran puis de réécrire le texte. Lorsque la fréquence d'effacement et de réécriture de l'écran atteint 24 ips, l'animation sera fluide.

Ajoutez d'abord la balise vidéo video et la balise canvas dans le fichier HTML

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

Définissez le style de position de la balise canvas sur position:absolute, puis la vidéo et la toile seront Les superposer ensemble ressemble à un joueur de barrage. Ajoutez ensuite le contenu lié au barrage au canevas. Tout d'abord, obtenez les informations pertinentes du canevas et définissez la taille et le style de police du canevas

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

L'objet barrage construit initialise divers paramètres, y compris le contenu. , couleur, type de mouvement et vitesse, la méthode move() est définie pour contrôler l'assouplissement du barrage. Chaque fois que la méthode move() est lancée, elle défile vers la gauche d'un pixel de vitesse unitaire.

Une fois la construction de l'objet barrage terminée, entrez le thème et la production d'animation, entrez directement le code

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

L'effacement est exécuté toutes les 20 ms, ctx.clearRect(0,0,c_width,c_height ); Il efface tout le canevas actuel, puis utilise ctx.save() pour enregistrer le canevas actuel, puis parcourt la liste des barrages (msgs est la liste des barrages. Chaque fois qu'un barrage est envoyé, l'instance de barrage sera ajoutée à la liste des barrages. list. ), puis traitez-les séparément selon le style de barrage par défaut ou le style de barrage statique. S'il s'agit d'un barrage du style par défaut, il sera traité selon la méthode suivante

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

Premièrement, si l'instance de barrage n'a pas l'attribut gauche défini, la largeur du canevas sera donnée à Si l'instance de barrage a quitté le canevas, elle sera définie sur null pour économiser de la mémoire, sinon appelez la méthode move() de l'instance de barrage pour modifier la valeur de l'attribut gauche, puis définissez la couleur du texte, écrivez nouveau. texte au premier niveau et restaurer le canevas. Ceci termine une image de l’animation.

La méthode d'implémentation du barrage statique est la suivante

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

Déplacez d'abord le point de base du canevas vers le centre du canevas. cette fois. La méthode clearRect() originale du canevas n'est plus applicable à ce canevas. Ensuite, définissez l'alignement du texte sur l'alignement central, définissez le

style de texte et remplissez le texte. Le barrage étant stationnaire, il n'est pas nécessaire de le ralentir, mais les barrages statiques disparaîtront également. Vous devez installer un drapeau pour les faire disparaître régulièrement. Afin de ne pas occuper d'attributs supplémentaires ici, nous utilisons directement l'attribut left comme indicateur. Nous décrémentons également l'attribut left, mais ne reflétons pas la diminution dans le canevas. Lorsque left atteint le seuil, utilisez la méthode ctx.clearRect(). pour dégager le barrage. De cette façon, le traitement du barrage statique est réalisé.

Les autres personnes qui ont une certaine base dans la définition des couleurs et des styles devraient être capables de le maîtriser facilement. Je ne le présenterai pas ici. Il suffit de regarder le code exécutable et de le comprendre vous-même.

Résumé

Ce projet utilise principalement du canevas pour le dessin de texte et l'animation d'assouplissement de texte. Les principales méthodes utilisées sont

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

À l'origine. Je ne comprenais pas save() et restaurer(), mais maintenant j'ai un peu de compréhension. Lorsque vous changez l'état du canevas, le canevas actuel n'est plus le canevas d'origine, donc lors de la modification du canevas, avant de changer l'état, enregistrez le canevas. État du canevas et changez l'état du canevas. Une fois le travail terminé, revenez à l'état du canevas d'origine et continuez à travailler. Par exemple, lorsque je traite des barrages statiques et que je change le point de base du canevas, la méthode de nettoyage du canevas d'origine ne s'applique plus au canevas actuel et je ne peux utiliser qu'une autre méthode de nettoyage dans le canevas actuel. Revenez ensuite à la toile d'origine.

Code exécutable

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

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture connexe :

Comment insérer une vidéo dans une page Web HTML

Comment créer une zone de texte HTML effet en lecture seule

Comment utiliser HTML+CSS pour afficher la barre de menu secondaire en faisant glisser la souris dessus

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!