HTML verwendet Canvas, um die Bullet-Screen-Funktion zu implementieren
|
Einführung Kürzlich musste ich für einen großen Auftrag einen Sperrfeuerspieler bauen. Ich habe den Quellcode von jemand anderem übernommen und ihn selbst neu implementiert. Die Demonstration ist wie folgt
Die Hauptfunktionen sind Sperrfeuer senden Farbe, Geschwindigkeit und Art des Sperrfeuers festlegen Sperrfeuer anzeigen Bekannte Mängel: Vollbildmodus nicht möglich Die Leinwand ist nicht adaptiv, die Player-Steuerung ist nicht angepasst, das entsprechende Sperrfeuer wird nicht entsprechend der Wiedergabezeit angezeigt und über das Sperrfeuer kann nicht mit der Maus gefahren werden. Bekannte Mängel werden in Zukunft behoben. Der im Internet zu findende Quellcode des Sperrfeuer-Players verfügt im Allgemeinen nur über Scroll-Sperrfeuer, aber kein statisches Sperrfeuer. Hier habe ich speziell die Implementierung des statischen Sperrfeuers hinzugefügt. Canvas zeichnet Text und Text-Scrolling-Effekt Der Kern des gesamten Players besteht darin, Text zu zeichnen und das Scrollen von Text zu animieren. Es gibt keine gute Animationsunterstützung für Text in Canvas, daher können wir dies nur selbst implementieren. Die Idee besteht darin, den Bildschirm kontinuierlich zu löschen und den Text neu zu schreiben. Wenn die Häufigkeit des Löschens und Neuschreibens des Bildschirms 24 fps erreicht, wird es eine flüssige Animation. Fügen Sie zuerst den Video-Tag und den Canvas-Tag zur HTML-Datei hinzu
<div id="Barragespieler">
<canvas id="cv_video" width="900px" height="450px"></canvas>
<video id="v_video" src="test.MP4" steuert Typ="video/mp4"></video>
</div>Stellen Sie den Positionsstil des Canvas-Tags auf „position:absolute“ ein. Dann überlappen sich Video und Canvas, sodass es wie ein Bullet-Screen-Player aussieht. Fügen Sie dann Bullet-Screen-bezogene Inhalte zur Leinwand hinzu. Holen Sie sich zunächst die relevanten Informationen zur Leinwand und legen Sie die Schriftgröße und den Schriftstil der Leinwand fest.
var c=document.getElementById("cv_video");
//Leinwandgröße abrufen var c_height=c.height;
var c_width=c.breite;
//Leinwand abrufen ctx=c.getContext("2d");
//Schriftstil festlegen ctx.font="25px DengXian";
Die Canvas-Informationen wurden abgerufen und festgelegt. Ein guter Koch kann nicht ohne Reis kochen. Als nächstes müssen wir das Sperrobjekt konstruieren. Der verwendete Konstruktionsmodus ist der dynamische Prototypmodus // Sperrobjektfunktion Sperre (Inhalt, Farbe, Typ, Geschwindigkeit) {
dieser.Inhalt=Inhalt;
diese.farbe=Farbe;
dieser.Typ=Typ;
this.speed=Geschwindigkeit;
wenn(dieser.Typ=="Standard"){
diese.Höhe=parseInt(Math.random()*c_Höhe)+10;
}sonst wenn (this.type=="statisch oben"){
diese.Höhe=parseInt((c_Höhe/2)-Math.random()*c_Höhe/2)+10;
}sonst wenn (this.type=="statischer Boden"){
diese.Höhe=parseInt((c_Höhe/2)+Math.random()*c_Höhe/2)+10;
}
wenn(Typ von diesem.move!="Funktion"){
Barrage.prototype.move=Funktion(){
wenn(dieser.Typ=="Standard"){
dies.links=diese.links-diese.Geschwindigkeit;
}
}
}
} Das erstellte Sperrfeuerobjekt initialisiert verschiedene Parameter, darunter Inhalt, Farbe, Bewegungstyp und Geschwindigkeit, und definiert die Methode move() zur Steuerung der Lockerung des Sperrfeuers. Jedes Mal, wenn die Methode move() ausgelöst wird, scrollt sie um ein Pixel der Einheitsgeschwindigkeit nach links.
//Schleife und schreibe die Leinwand, um einen Animationseffekt zu erzielen setInterval(function(){
ctx.clearRect(0,0,c_Breite,c_Höhe);
ctx.speichern();
für (var i = 0; i < msgs.length; i++) {
wenn(msgs[i]!=null){
wenn(msgs[i].type=="default"){
handleDefault(Nachrichten[i]);
}anders{
handleStatic(Nachrichten[i]);
}
}
}
},20)Das Löschen wird alle 20 ms durchgeführt. ctx.clearRect(0,0,c_width,c_height); löscht die gesamte aktuelle Leinwand und verwendet dann ctx.save(), um die aktuelle Leinwand zu speichern. Dann wird die Aufzählungsliste durchlaufen (msgs ist die Aufzählungsliste, und jedes Mal, wenn ein Aufzählungszeichen gesendet wird, wird die Aufzählungsinstanz der Liste hinzugefügt) und dann gemäß dem Aufzählungszeichen im Standardstil oder im statischen Stil verarbeitet. Handelt es sich um einen Aufzählungskommentar im Standardstil, wird er wie folgt verarbeitet
//Verarbeite die Standardfunktion im Barrage-Stil handleDefault(barrage){
wenn(Barrage.left==undefined||Barrage.left==null){
Sperrfeuer.links=c.Breite;
}anders{
wenn(Sperrfeuer.links<-200){
Sperrfeuer=null;
}anders{
Sperrfeuer.Bewegung()
ctx.fillStyle=Sperrfeuer.Farbe;
ctx.fillText(Sperrstufe.Inhalt, Sperrstufe.Links, Sperrstufe.Höhe)
ctx.wiederherstellen();
}
}
}Wenn für die Bullet-Message-Instanz kein linkes Attribut festgelegt ist, weisen Sie ihr zunächst die Breite der Leinwand zu. Wenn die Bullet-Message-Instanz die Leinwand verlassen hat, setzen Sie sie auf null, um Speicher zu sparen. Andernfalls rufen Sie die Methode move() der Bullet-Message-Instanz auf, um den Wert des linken Attributs zu ändern, legen Sie dann die Farbe des Textes fest, schreiben Sie neuen Text und stellen Sie die Leinwand wieder her. Damit ist ein Animationsbild abgeschlossen. Die Implementierungsmethode für statisches Sperrfeuer ist wie folgt
//Funktion im Stil statischer Sperrfeuer handhaben handleStatic(sperrfeuer){
ctx.moveTo(c_width/2, Sperrfeuer.höhe);
ctx.textAlign="zentriert";
ctx.fillStyle=Sperrfeuer.Farbe;
ctx.fillText(Sperrstufe.Inhalt, c_Breite/2, Sperrstufe.Höhe);
wenn(Barrage.left==undefined||Barrage.left==null){
Sperrfeuer.links=c.Breite;
}anders{
wenn(Sperrfeuer.links<-200){
ctx.fillText("",c_width/2,barrage.height);
Sperrfeuer=null;
//ctx.wiederherstellen();
ctx.clearRect(0,0,c_Breite,c_Höhe);
}anders{
Sperrfeuer.links=Sperrfeuer.links-6;
}
}
}Verschieben Sie zunächst den Basispunkt der Leinwand in die Mitte der Leinwand. Beachten Sie, dass zu diesem Zeitpunkt eine neue Leinwand generiert wird und die Methode clearRect () der ursprünglichen Leinwand auf diese Leinwand nicht mehr anwendbar ist. Stellen Sie anschließend die Textausrichtung auf zentriert ein, legen Sie den Textstil fest und füllen Sie den Text aus. Da das Sperrfeuer statisch ist, ist keine Lockerung erforderlich. Das statische Sperrfeuer verschwindet jedoch auch, sodass ein Flag gesetzt werden muss, damit es zu einem bestimmten Zeitpunkt verschwindet. Um hier keine zusätzlichen Attribute zu belegen, verwenden wir das linke Attribut direkt als Flag und verringern auch das linke Attribut, spiegeln die Verringerung jedoch nicht auf der Leinwand wider. Wenn links den Schwellenwert erreicht, wird die Methode ctx.clearRect () verwendet, um den Aufzählungskommentar zu löschen. Dadurch wird die Verarbeitung eines statischen Sperrfeuers realisiert. Was die anderen Einstellungen für Farben und Stile betrifft, sollten diejenigen, die über eine gewisse Grundlage verfügen, diese problemlos beherrschen können. Daher werde ich sie hier nicht im Detail vorstellen. Lesen Sie einfach den ausführbaren Codeteil, um ihn zu verstehen. Zusammenfassen Dieses Projekt verwendet hauptsächlich Canvas, um Text zu zeichnen und langsame Textanimationen zu realisieren. Die hauptsächlich verwendeten Methoden sind canvasDom.getContext() canvas.speichern()/canvas.wiederherstellen() canvas.clearRect() canvas.moveTo() Früher habe ich save() und restore() nicht verstanden, aber jetzt verstehe ich es ein bisschen. Wenn Sie den Canvas-Status ändern, ist die aktuelle Leinwand nicht mehr die ursprüngliche Leinwand. Speichern Sie also den Canvas-Status, bevor Sie ihn ändern, wechseln Sie den Canvas-Status und stellen Sie ihn nach Abschluss der Arbeit wieder in den ursprünglichen Canvas-Status zurück, um weiterarbeiten zu können. Wenn ich beispielsweise mit statischem Sperrfeuer arbeite, ändere ich den Basispunkt der Leinwand. Dann ist die Löschmethode der ursprünglichen Leinwand nicht mehr auf die aktuelle Leinwand anwendbar. Ich muss in der aktuellen Leinwand eine andere Löschmethode verwenden. Stellen Sie dann die ursprüngliche Leinwand wieder her. Ausführbarer Code
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
</Kopf>
<style type="text/css">
.pickdiv{
Breite: 30px;
Höhe: 30px;
Cursor: Zeiger;
Rand: 2px durchgehend grau;
Anzeige: Inline-Block;
}
#Weiß{
Hintergrund: weiß;
}
#Rot{
Hintergrund: #ff6666;
}
#Gelb{
Hintergrund:#ffff00;
}
#Blau{
Hintergrund: #333399;
}
#Grün{
Hintergrund: #339933;
}
#Lebenslaufvideo{
Position: absolut;
Z-Index: 1;
}
#Barragespieler{
Position: relativ;
Anzeige: Block;
Breite: 900px;
Höhe: 500px;
}
#v_video{
Position: absolut;
Breite: 100 %;
Höhe: 100%;
Z-Index: 0;
}
</Stil>
<Text>
<div id="Barragespieler">
<canvas id="cv_video" width="900px" height="450px"></canvas>
<video id="v_video" src="test.MP4" steuert Typ="video/mp4"></video>
</div>
<div id="barrageinput">
<div>
<input type="text" id="smsg" placeholder="Bitte geben Sie den Inhalt des Aufzählungskommentars ein"/>
<button id="send">Senden</button>
</div>
<div id="Farbauswahl">
<div Klasse="pickdiv" id="weiß"></div>
<div Klasse="pickdiv" id="rot"></div>
<div Klasse="pickdiv" id="gelb"></div>
<div Klasse="pickdiv" id="blau"></div>
<div Klasse="pickdiv" id="grün"></div>
</div>
<div id="Typauswahl">
<input type="radio" name="type" value="default">Standard<input type="radio" name="type" value="static top">Statisches Oberteil<input type="radio" name="type" value="static bottom">Statisches Unterteil</div>
<div id="Geschwindigkeitspick">
<Eingabetyp="Radio" Name="Geschwindigkeit" Wert="1">1X
<Eingabetyp="Radio" Name="Geschwindigkeit" Wert="2">2X
<Eingabetyp="Radio" Name="Geschwindigkeit" Wert="3">3X
</div>
<div id="Stilauswahl"></div>
</div>
<Skript>
var c=document.getElementById("cv_video");
var typeDom = document.getElementsByName("Typ");
var speedDom = document.getElementsByName("Geschwindigkeit");
var Farbauswahl = document.getElementById("Farbauswahl");
var smsg = document.getElementById("smsg");
var Farbe = "weiß";
var Geschwindigkeit=1;
var Typ="Standard";
var msgs = [];
//Leinwandgröße abrufen var c_height=c.height;
var c_width=c.breite;
//Leinwand abrufen ctx=c.getContext("2d");
ctx.font="25px DengXian";
//Farbauswahl verarbeiten colorpick.addEventListener('click',function(event){
Schalter(Ereignis.Ziel.ID){
Fall "weiß":
Farbe="weiß";
brechen;
Fall "rot":
Farbe = "ff6666";
brechen;
Fall "gelb":
Farbe = "ffff00";
brechen;
Fall "grün":
Farbe #339933";
brechen;
Fall "blau":
Farbe #333399";
brechen;
}
})
//Verarbeitung des Sendens des Bullet-Screens document.getElementById("send").onclick=function(){
var text=smsg.wert;
für(var i=0;i<typeDom.length;i++){
wenn (typeDom[i].geprüft){
Typ=typeDom[i].Wert;
brechen;
}
}
für(var i=0;i<speedDom.length;i++){
wenn(speedDom[i].checked){
Geschwindigkeit = 2 * parseInt (speedDom [i] .value);
brechen;
}
}
var tempBarrage = neues Barrage (Text, Farbe, Typ, Geschwindigkeit);
msgs.push(tempBarrage);
}
//
//Teil des Sperrfunktionscodes//
//Barrage-Objektfunktion Barrage (Inhalt, Farbe, Typ, Geschwindigkeit) {
dieser.Inhalt=Inhalt;
diese.farbe=Farbe;
dieser.Typ=Typ;
this.speed=Geschwindigkeit;
wenn(dieser.Typ=="Standard"){
diese.Höhe=parseInt(Math.random()*c_Höhe)+10;
}sonst wenn (this.type=="statisch oben"){
diese.Höhe=parseInt((c_Höhe/2)-Math.random()*c_Höhe/2)+10;
}sonst wenn (this.type=="statischer Boden"){
diese.Höhe=parseInt((c_Höhe/2)+Math.random()*c_Höhe/2)+10;
}
wenn(Typ von diesem.move!="Funktion"){
Barrage.prototype.move=Funktion(){
wenn(dieser.Typ=="Standard"){
dies.links=diese.links-diese.Geschwindigkeit;
}
}
}
}
//Schleife und schreibe die Leinwand, um einen Animationseffekt zu erzielen setInterval(function(){
ctx.clearRect(0,0,c_Breite,c_Höhe);
ctx.speichern();
für(var i=0;i<msgs.length;i++){
wenn(msgs[i]!=null){
wenn(msgs[i].type=="default"){
handleDefault(Nachrichten[i]);
}anders{
handleStatic(Nachrichten[i]);
}
}
}
},20)
//Verarbeite die Standardfunktion im Barrage-Stil handleDefault(barrage){
wenn(Barrage.left==undefined||Barrage.left==null){
Sperrfeuer.links=c.Breite;
}anders{
wenn(Sperrfeuer.links<-200){
Sperrfeuer=null;
}anders{
Sperrfeuer.Bewegung()
ctx.fillStyle=Sperrfeuer.Farbe;
ctx.fillText(Sperrstufe.Inhalt, Sperrstufe.Links, Sperrstufe.Höhe)
ctx.wiederherstellen();
}
}
}
//Funktion im Stil statischer Sperrfeuer handhaben handleStatic(sperrfeuer){
ctx.moveTo(c_width/2, Sperrfeuer.höhe);
ctx.textAlign="zentriert";
ctx.fillStyle=Sperrfeuer.Farbe;
ctx.fillText(Sperrstufe.Inhalt, c_Breite/2, Sperrstufe.Höhe);
wenn(Barrage.left==undefined||Barrage.left==null){
Sperrfeuer.links=c.Breite;
}anders{
wenn(Sperrfeuer.links<-200){
ctx.fillText("",c_width/2,barrage.height);
Sperrfeuer=null;
//ctx.wiederherstellen();
ctx.clearRect(0,0,c_Breite,c_Höhe);
}anders{
Sperrfeuer.links=Sperrfeuer.links-6;
}
}
}
</Skript>
</body>
</html>Oben habe ich Ihnen erklärt, wie Sie Canvas in HTML verwenden, um die Sperrfunktion zu realisieren. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Detaillierte Erklärung des JavaScript-Prototyps und Beispiele
Artikel empfehlen
Detaillierte Erläuterung von 2 Methoden zum Synchronisieren der Netzwerkzeit im Linux/CentOS-System
Aus Hardwaregründen kann es vorkommen, dass die M...
Beispielcode zur Implementierung der bidirektionalen Authentifizierung mit Nginx+SSL
Erstellen Sie zunächst ein Verzeichnis cd /etc/ng...
Lösung für das Problem, dass Xshell keine Verbindung zur virtuellen VirtualBox-Maschine herstellen kann
Lassen Sie uns zunächst den Netzwerkeinstellungsm...
Vertieftes Verständnis davon in JavaScript
Vertieftes Verständnis davon in Js JavaScript Ber...
Versuchen Sie Docker+Nginx, um die Single-Page-Anwendungsmethode bereitzustellen
Von der Entwicklung bis zur Bereitstellung: Mache...
CentOS7-Upgrade des Kernels kernel5.0 Version
Upgrade-Prozess: Ursprüngliches System: CentOS7.3...
Ubuntu 16.04 64-Bit in drei Schritten mit 32-Bit-Programmen kompatibel
Schritt 1: Bestätigen Sie die Architektur Ihres S...
Warum TypeScripts Enum problematisch ist
Inhaltsverzeichnis Was ist passiert? Verwendung S...
Details zu Makrotasks und Mikrotasks in JavaScript
Inhaltsverzeichnis 1. Was sind Mikroaufgaben? 2. ...
MySQL-Sharding-Details
1. Einführung in das Geschäftsszenario Angenommen...
Lösen Sie das Hierarchieproblem des Z-Index des untergeordneten Elements und der Geschwisterknoten des übergeordneten Elements in CSS
1. Die Entstehung des Problems Habe eine flache L...
25 neue nützliche Icon-Sets zum Download im Ausland
1. E-Commerce-Symbole 2. Symbol Süßigkeiten 2 3. ...
MAC+PyCharm+Flask+Vue.js-Build-System
Inhaltsverzeichnis Konfigurieren Sie node.js+nvm+...
Aktivieren Sie OCSP, um die Effizienz der https-Zertifikatsüberprüfung zu verbessern und das Problem des langsamen Zugriffs auf Let’s Encrypt SSL-Zertifikate zu lösen
In den letzten Tagen war der Zugriff auf die Webs...
Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken
Verwenden Sie CSS, um zu verhindern, dass Lightbo...