HTML utilise une toile pour atteindre la fonction de barrage

Récemment, vous devez faire un barrage lorsque vous faites de gros devoirs. Je me suis souvenu du code source des autres et de réévalué, et la démonstration est la suivante

Navire

Réglez la couleur, la vitesse et le type de barrage

Barrage d'affichage

Impossible de plein écran

Canvas ne s'adapte pas à l'adaptation

Aucun contrôle de joueur personnalisé

Le barrage correspondant n'est pas affiché en fonction du temps de lecture

Le barrage ne peut pas être suspendu

Les défauts connus seront améliorés à l'avenir. Le code source du barrage qui peut être trouvé sur Internet ne fait généralement que le barrage sans barrage statique.

Le noyau de l'ensemble du joueur est de dessiner du texte et de faire des animations de roulement de texte.

Ajoutez d'abord des balises vidéo vidéo et des câbles de toile dans des fichiers HTML

 <div id = barragePlayer> <canvas id = cv_video width = 900px height = 450px> </ canvas> <vidéo id = v_video src = test.mp4 contrôles = video / mp4> / vidéo> </div>

Définissez le style de position de la balise Canvas sur Positive: Absolute, puis la vidéo et la toile se chevauchent ensemble. Ajoutez ensuite le contenu du barrage à la toile.

 var c = document.getElementyid (cv_video); ; les informations sur le toile ont été obtenues et définies, et la femme intelligente est difficile à cuire sans riz. , spey) {this.Content = contenu; if (this.type == top statique) {this.head = parseInt ((c_height / 2) -math.random () * c_height / 2) +10;} else if (this.type == static ttom) {this this .HEight = paSeInt ((c_height / 2) + math.random () * c_height / 2) +10;} if (typeof this.move! = Fonction) {barrage.prototype.move. type == par défaut) {this.left = this.left-this.speed;}}}}}

L'objet de barrage construit initialise divers paramètres, y compris le contenu, la couleur, les types de mouvements et la vitesse, définissant la méthode move () pour contrôler le mouvement du barrage, chaque méthode move () pour faire rouler une vitesse unitaire à gauche à chaque fois pour quitter le Méthode de gauche à gauche.

Une fois le constructeur de l'objet barrage terminé, le thème est entré, la production d'animation, directement sur le code

 // cercles et canevas pour réaliser l'effet d'animation 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) {mandeprefault (msgs [i]);} else {handleState (msgs [i]); }}}}, 20)

L'exécuter toutes les 20 ms, ctx.clearrct (0,0, c_width, c_height); Liste du barrage, lorsqu'un barrage est envoyé, l'instance de barrage sera ajoutée à la liste), puis traitée séparément en fonction du barrage du style par défaut ou du style statique. S'il s'agit du barrage de style par défaut, il sera traité conformément aux méthodes suivantes

 // Traitez la fonction de style barrage par défaut manieledFault (barrage) {if (barrage.left == undefined || barrage.left == null) {barrage.left = c.width;} else (barrag e.left <-200) {barrage = null;} else {barrage.move () ctx.fillstyle = barrage.color;

Tout d'abord, si l'instance de barrage ne définit pas l'attribut gauche, la largeur de la toile lui est donnée. de l'instance de barrage pour modifier la valeur de l'attribut gauche, puis définissez la couleur du texte, écrivez un nouveau texte au premier niveau et restaurez la toile. Cela complète un cadre d'animation.

La méthode de mise en œuvre du barrage statique est la suivante

 // Traitement des fonctions de style de barrage statique (barrage) {ctx.moveto (c_width / 2, barrage.height); 2. Barrage.height); (Xt (, c_width / 2, barrage.height); barrage = null; // ctx. Store (); ctx.clearrect (0,0, c_width, c_height);} else {barrage.left = barrage.left-6 ;

Tout d'abord, le point de base de la toile est déplacé vers le centre de la toile. à cette toile. Définissez ensuite l'alignement du texte sur l'alignement moyen, définissez le style de texte et remplissez le texte. Parce que le barrage est statique, il n'est pas nécessaire de ralentir, mais le barrage statique disparaîtra également. Afin de ne pas occuper les attributs supplémentaires ici, nous utilisons directement l'attribut gauche comme position de logo, qui diminue également l'attribut gauche. De cette façon, le traitement du barrage statique est réalisé.

D'autres personnes qui ont une certaine fondation sur la couleur et le paramètre de style devraient être faciles à maîtriser et ne pas le présenter ici.

Ce projet utilise principalement la toile pour le dessin de texte et l'animation lente du texte.

 Canvasdom.getConotext () canvas.save () /canvas.restore () canvas.clearrect () canvas.moveto ()

Il s'avère que je ne peux pas le comprendre avec Save () et restaurer (). Avant de modifier l'état de la toile. Comme lorsque je gère le barrage statique, le point de base de la toile a été modifié, de sorte que la méthode de dégagement de la toile d'origine n'est plus applicable à la toile actuelle. Revenez ensuite à la toile d'origine.

Code en cours d'exécution

 <! UAA -Chatation du contenu compatible = IE = <Tivre> Document </ Title> </ Head> <Style Type = Text / CSS> .PickDiv {Width: 30px; Inline-Black;} #White {Background: White;} #red {background: # ff666;} #yellow {background: # ffff00;} #blue {# 333399;} #Green {background: # 339933;} #cv_video { Position: Absolute; ;} </ style> <body> <div id = BarragePlayer> <mvas id = cv_video width = 900px height = 450px> </ canvas> <video id = v_video src = test .mp4 Controls type = vidéo / mp4> </ Vidéo> </div> <div id = barrageInput> <div> <input type = text id = smsg placeholder = Veuillez saisir le contenu du barrage /> <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> div class = pickDiv id = Bleu> </ div> <div class = pickDiv id = green> </ div> </div> <div id = typePick> <input type = radio name = type = Defaul t> Par défaut <entrée type = nom de radio = Type Value = Static Top> Top statique <Type d'entrée = Radio Name = Type Value = Static Bottom> Static Bottom </div> <div id = SpeedPick> <INPUT TYPE = Radio Name = Speed ​​Value = 1> 1x <Type d'entrée Type = Radio Name = Speed ​​Value = 2> 2x <Type de saisie = Radio Name = Speed ​​Value = 3> 3x </div> <div id = stylePick> </div> <cript> var c = document.getElementById (cv_video); Var typedom = document.getElementsByName (type); 1; AddEventRistner (Click ', Fonction) {Switch (Event.Target.ID) {Blanc White: Color = White; Color = # 339933; longueur SpeedDom [i] .Chered) {Speed ​​= 2 * parseInt (SpeedDom [i]. ;} // // The function of the barrage parts // // The barrage object (Content, Color, Type, Speed) {This.Content = Content; this.color = color; this.type = type; this.Speed ​​= speed; if (this.type == default) {this.height = paraseint (math.random ()*c_hei ght) +10;} else if (this.type == Static Top) {this.head = PARSEINT ((c_height/2) -math.random ()*c_height/2) +10;} Else if (this.type == Static bottom) {th IS .Height = PARSEINT ((C_height/2)+math.random () * c_height / 2) +10;} if (typeof this.move! = fonction) {barrage.prototype.move = fuins {if (this. type == default) {this.left = this.left-this. Speed;}}} // Entourez la toile de l'effet d'animation setterval ;; Null) {if (msgs [i] .Type == Default) {handledefault (msgs [MSGS [ i]);} Else {HandleStatic (msgs [i]);}}}, 20) // Process the default barrage style 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; ltext (barrage. Content, Barrage.left, BARRAGE.HEIGHT) CTX.RESTORE ();}} // Treatment of the Static barrage style Function HandleState (BARRAGE) {ctx.moveto (C_WIDTH/2, Barrage.Height); C tx.TextAlign = Center ; ctx.fillstyle = barrage.color; ctx.filltext (barrage.content, c_width/2, barrage.head); if (barrage. Left == Undefined || Barrage.left == NULL) {Barrage.left = c. = null; //ctx.restore ();

Ce qui précède est le HTML présenté par l'éditeur pour utiliser la toile pour implémenter la fonction de barrage. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!