HTML verwendet Canvas, um eine Sperrfunktion zu erreichen

Vor kurzem müssen Sie einen Barrage -Spieler machen, wenn Sie große Hausaufgaben machen. Ich habe mich an den Quellcode anderer erinnert und neu realisiert, und die Demonstration lautet wie folgt

Schiff

Stellen Sie die Farbe, die Geschwindigkeit und den Typ des Sperrfeuers ein

Sperrfeuer anzeigen

Kann nicht Vollbildschirm

Leinwand passt sich nicht an die Anpassung an

Keine benutzerdefinierte Spielerkontrolle

Das entsprechende Sperrfeuer wird nicht gemäß der Wiedergabezeit angezeigt

Das Sperrfeuer kann nicht suspendiert werden

Bekannte Mängel werden in Zukunft verbessert. Der Quellcode des Barrage -Players, der im Internet zu finden ist, macht im Allgemeinen nur ohne statische Sperrfeuer.

Der Kern des gesamten Players ist es, Text zu zeichnen und Text zu rollen.

Fügen Sie zuerst Video -Video -Tags und Leinwandkabel in HTML -Dateien hinzu

 <div id = barrageplayer> <canvas id = cv_video width = 900px height = 450px> </canvas> <Video id = v_video src = test.mp4 Controls = Video/MP4>/Video> </div>

Setzen Sie den Positionsstil des Leinwand -Tags auf positiv: Absolut und dann sind das Video und die Leinwand überlappt. Fügen Sie dann den Inhalt des Sperrfeuers zu der Leinwand hinzu.

 var c = document.getElementById (cv_video); Es wurden Informationen zu Canvas erhalten, und die clevere Frau ist schwierig, ohne Reis zu kochen. Spey) {this.content = content; if (this.type == static top) {this.head = parseInt ((c_height/2) -math.random ()*c_height/2) +10;} else if (this.type == static ttom) {this this .Height = ParseInt ((c_Height/2) +math.random ()*c_height/2) +10;} if (typeof this.move! = Function) {barrage.prototype.move. Typ == Standard) {this.left = this.left-this.speed;}}}}}

Das konstruierte Barrage -Objekt initialisiert verschiedene Parameter, einschließlich Inhalt, Farbe, Bewegungstypen und Geschwindigkeit, und definieren die Move () -Methode, um die Bewegung des Sperrs zu steuern. Jede Move () -Methode zum Rollen einer Geschwindigkeit einer Einheit nach links nach links nach links links nach links

Nachdem der Konstruktor des Barrage -Objekts abgeschlossen ist, wird das Thema eingegeben, die Produktion von Animation, direkt auf dem Code

 // Kreise und Leinwand, um den Animationseffekt setInterval (function () {ctx.clearrect (0,0, c_width, c_height); ctx.save (); for (var i = 0; i <msgsgth; i +) zu erreichen +) {) {) {if (msgs [i]! }}}}, 20)

Führen Sie es alle 20 ms aus, ctx.clearrct (0,0, c_width, c_height); Barrage List wird beim Senden eines Sperrfeuers die Sperrinstanz zur Liste hinzugefügt) und dann separat gemäß der Flut des Standardstils oder des statischen Stils verarbeitet. Wenn es sich um das Standard -Style -Sperrfeuer handelt, wird es gemäß den folgenden Methoden verarbeitet

 // Verarbeiten Sie die Standardfunktion des Barrage-Stils HandleDefault (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;

Wenn die Barrage -Instanz nicht das linke Attribut festlegt, wird die Breite der Leinwand gegeben. der Barrage -Instanz, um den Wert des linken Attributs zu ändern, dann die Farbe des Textes festlegen, neuen Text in die erste Ebene schreiben und die Leinwand wiederherstellen. Dadurch wird ein Animationsrahmen abgeschlossen.

Die Implementierungsmethode des statischen Flagers lautet wie folgt

 // Behandlung von statischen Sperrfunktionen (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); ;}}}

Zunächst wird der Basispunkt der Leinwand in die Mitte der Leinwand bewegt. auf diese Leinwand. Stellen Sie dann die Textausrichtung auf die mittlere Ausrichtung ein, stellen Sie den Textstil fest und füllen Sie den Text aus. Da das Sperrfeuer statisch ist, müssen auch nicht verlangsamt werden, aber auch das statische Sperrfeuer wird verschwinden. Um die zusätzlichen Attribute hier nicht zu besetzen, verwenden wir das linke Attribut direkt als Logo -Position, was auch das linke Attribut verringert. Auf diese Weise wird die Verarbeitung von statischen Flattern realisiert.

Andere Personen, die eine bestimmte Grundlage für Farben und Stileinstellungen haben, sollten einfach zu meistern sein und es nicht vorstellen.

Dieses Projekt verwendet hauptsächlich Leinwand für die Textzeichnung und die langsame Animation des Textes.

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

Es stellt sich heraus, dass ich es mit Save () und Wiederherstellung () nicht verstehen kann. Wechseln Sie vor Abschluss der Arbeiten weiter, bevor Sie den Zustand der Leinwand ändern. Wie beim statischen Sperrfeuer wurde der Basispunkt der Leinwand geändert, so Kehren Sie dann zu der ursprünglichen Leinwand zurück.

Auslaufcode

 <! uaa -Compatible Content = IE = Edge> <title> Dokument </title> </head> <style type = text/css> .pickdiv {width: 30px; Inline-Black;} #white {Hintergrund: White;} #Red {Hintergrund: #ff6666;} #yellow {Hintergrund: #ffff00;} #blue { #333399;} #green {Hintergrund: #339933;} #cv_video {{{{{{{{{{{{{{{{{{{{ Position: Absolute; ;} </style> <body> <div id = barrageplayer> <mvas id = cv_video width = 900px hohe = 450px> </canvas> <Video id = v_video src = test .mp4 steuert Typ = Video/mp4> </</</ Video> </div> <div id = barrageInput> <div> <Eingabe type = text id = smsg platzhalter = Geben Sie den Barrage -Inhalt/> <Schaltfläche ID = Senden> </button> </div> <div id = ein colorpick> <div class = pickDiv id = white> </div> <div class = pickDiv id = rot> </div> <div class = pickDiv id = gelb> </div> </div> div class = pickDiv id = Blau> </div> <div class = pickDiv id = green> </div> </div> <div id = TypePick> <Eingabe typ = Typ Value = statische Oberseite> statische ober <Eingabetyp = Radio Name = Typ Value = Static Bottom> Static Bottom </div> <div id = speedpick> <Eingabetyp = Radio Name = Speedwert = 1> 1x <Eingabetyp = Radio name = Speedwert = 2> 2x <Eingabetyp = Radio name = Speedwert = 3> 3x </div> <div id = stylepick> </div> <skript> var c = document.getElementById (cv_video); Var typeDom = document.getElementsByName (Typ); 1 var type = var msgs = []; addeventristener ('click', function) {switch.target.id) {case White: Color = White; Color =#339933; Länge; i ++) {if (typedom [i]. Speeddom [i]. } // // Die Funktion der Barrage -Teile // das Barrage -Objekt (Inhalt, Farbe, Geschwindigkeit) {this.content = content; = Geschwindigkeit; ParseInt ((c_height/2) -math.random ()*c_height/2) +10;} else if (this.type == static booth) {ths .height = parseInt ((c_Height/2) +Math.Random ()*C_Height/2) +10;} if (typeof this.move! Speed;}}} // Kreisen Sie die Leinwand des Animationseffekts ein ;; Null) {if (msgs [i] .type == Standard) {HandleDeFault (msgs [msgs [i]);} else {handlestatisch (msgs [i]);}}}, 20) // Verarbeiten Sie den Standard -Barage -Stil verarbeiten Funktion HandleDefault (Barrage) {if (barrage.left == undefined || barrage.left == null) {barrage.left = c.width;} else {if (barrage.left <-200) {barrage = null;} sonst {barrage.move () ctx.fillstyle = barrage.color; {ctx.moveto (c_width/2, Barrage.Height); links == undefiniert || = null; //ctx.restore ();

Das oben genannte HTML, der vom Editor vorgestellt wurde, um die Barrage -Funktion zu implementieren. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!