Kürzlich habe ich angefangen, Barrage -Video -Websites zu entwickeln und die Funktion von Barrage durch Leinwand in HTML5 zu erreichen.
Dann sprechen Sie nicht über Klatsch, lassen Sie uns zuerst darüber nachdenken.
Idee: Aus dem Seitenlayout deckt es eine Leinwand im Videofenster ab, das vom Video -Tag erzeugt wird, und kann mit absoluter Positionierung erreicht werden. Das Wichtigste ist die Anzeige des Fluts auf der JS -Steuerelemente. und das Sperrfeuer ist der Flut. Das Barrage -Objekt enthält Methoden: Setzen Sie die horizontalen vertikalen Koordinaten des Sperrfeuers, die Bewegung des Flutes. Das Prinzip der Implementierung ist das Ereignis, bei dem das Hörvideo zu spielen beginnt, und ein Timer wird beim Start des Videoes generiert. Code des Sperrfeuers, der Timer verfügt auch über den Code zum Aktualisieren des Bullet -Arrays.
Das Bild unten ist ein Screenshot des Sperreffekts
Starten Sie dann den Code direkt:
(Function () {window.onload = function () {var Video = document. = 800 var cavHeight = 420 cav.width = cavwidth cav.height = cavHeight var ctx = cav.getContext (2d) // Das Array von Speicher -Barrage -Objekt var capobjs = [] var lastemtime var acht = 20 var inputele = document.getElements byclassname (Caption -input-text) [0] var sendele = document.getElementsByClassName (caption-sendbutton) [0] var colorm = document.getElementsByClassName (Coloritems) [0] ar isMoveputele = document.getElementsByClassName (caption-input-IsMove) [Ismoveputele) [caption-input-isMove) [ 0] // Die Barrage Color Var Colors = [#FFF,#FFCCCC,#CCFFCC,#CCCCFF,#FFFFCC,#CCFFFFF] var selectColorIndex = 0 var prepPlaytime = 0 // Testdaten. // Das Array der vielseitigen vielseitigen in der Kanada in der Canvas varitobjs = [{leer: true, value: 20, index: 0}, {leer: true, Wert: 50, Index: 1}, {leer: true, true, Wert: 80, Index: 2}, {leer: true, Wert: 110, Index: 3}, {leer: true, Wert: 140, Index: 4}, {leer: true, Wert: 170, Index: 5}, { leer: true, Wert: 200, Index: 6}, {leer: true, Wert: 230, Index: 7}, {leer: true, Wert: 260, Index: 8}, {leer: true, value: 290, Index: 9}, {leer: true, Wert: 320, Index: 10}, {leer: true, Wert: 350, Index: 11}, {leer: true, Wert: 380, Index: 12}, {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ Blank: True, Value: 410, Index: 13}] // test data test data var testarray = [{content: abcdefghijklmnopqrstuvwxyz, time: 1, ismove: false, colorINDEX: 0}, {conne, TENT: 233333333333333, Time: 2, ismove: true, colorIndex: 0}, {Inhalt: trocken, hahaha ~~~~~~, Zeit: 2, ismove: true, colorIndex: 5}, {Inhalt: trocken, hahaha ~~~~~ Zeit: 2, ismove: true, colorIndex: 4}, {Inhalt: Trockener Toast, hahaha ~~~~~~, Zeit: 2, ismove: true, colorIndex: 4}, {Inhalt: trockener Toast, hahaha ~~~ ~~ ~, Zeit: 2, ismove: true, colorIndex: 0}, {Inhalt: Trockener Toast, hahaha ~~~~~, Zeit: 2, ismove: true, colorIndex: 0}, {Inhalt: 23333333333333, Zeit: 3, Ismove: True, ColorIndex: 0}, {Inhalt: 233333333333333, Zeit: 3, Ismove: TRUE, ColorIndex: 0}, {Inhalt: 2333333333333333, Zeit: 3, Ismove: T: T: T. : 2333333333333333, Time: 3, ISMOVE: TRUE, ColorIndex: 0}, {content: 2333333333, Time: 3, ISMove: True, colorIndex: 0}, {content: 233333333333333 3333, time: 3, ismove: true, colorIndex: 0 }, {Content: 2333333333333333, Time: 4, ISMOVE: False, ColorIndex: 0}, {CO NTENT: 23333333333333, Time: 5, ISMOVE: TRUEX: 4}, {conference: {conference: 2333333333333333, Time: 6, Ismove: true, ColorIndex: 2}, {Inhalt: 233333333333333, Zeit: 7, Ismove: true, ColorIndex: 2}, {Inhalt: 23333333333333, Zeit: 7, Ismove: true, coloririndex: 2}, {Content: 23333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333. Zeit: 7, ismove: true, colorIndex: 2}, {Inhalt: 233333333333333, Zeit: 7, Ismov E: TRUE, ColorIndex: 2}, {Inhalt: 23333333333333, Zeit: 7, ismove: true: true: true: true, colorIndex: 2 }, {Inhalt: 233333333333333, Zeit: 7, ismove: true, colorIndex: 2}, {Inhalt: 2333333333333333, Zeit: 8, Ismove: True, ColorIndex: 0}, {Inhalt: 233333333333333, Zeit: 9, 9, Ism, ISM: Richtig, ColorIndex: 0}, {Inhalt: 233333333333333, Zeit: 10, Ismove: True, ColorIndex: 0}, {Inhalt: Der Lehrer sagte sehr gut, ich möchte hart studieren "," ", Is: 12, Ismove: Richtig, ColorIndex: 0}, {Inhalt: 老师说的非常好 ， 我要好好学习了》》》》, Zeit: 13, ismove: true, colorIndex: 0}, {Inhalt: 老师说的非常好 ， 我要好好学习了》》》》, Zeit: 14, ismove: true, colorIndex: 2}, {Inhalt: Der Lehrer sagte sehr gut, ich möchte hart studieren "" "" ", is: 15, ismove: false, ColorIndex: 0}, {Inhalt: Lehrer: Lehrer sagte sehr gut, ich möchte hart studieren. " So studieren {Inhalt: Der Lehrer sagte sehr gut, ich möchte hart studieren. "", 20, ismove: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: true: wahr : true: true, colorIndex: 3}, {Inhalt: Der Lehrer sagte sehr gut, ich möchte hart studieren "" "" ", Zeit: 21, Ismove: True, ColorIndex: 0}, {Konferenz: Der Lehrer sagte Sehr gut, ich möchte gut sein, ich möchte gut sein. Kleine Rakete wird gebürstet =========, Zeit: 23, Ismove: True, ColorIndex: 0}, {Inhalt: Altes Eisen, die kleinen Geschenke haben eine Welle genommen, die kleinen Raketen werden gebürstet === ================: TRUE, ColorIndex: 0}, {Inhalt: Altes Eisen, kleine Geschenke haben eine Welle genommen, kleine Autos raketen bürsten =======, Zeit: 25, ismove: true, colorIndex: 3: 3}, {Inhalt: Altes Eisen, die kleinen Geschenke haben eine Welle genommen, die kleinen Raketen werden gebürstet =========, Zeit: 26, ismove: true,. ColorIndex: 0}, {Inhalt: Alt: Altes Eisen, kleine Geschenke haben eine Welle genommen, die kleinen Raketen des Autos werden gebürstet , {content: old iron, small gifts go It's a wave, the small car rocket brush it ============================== ====================================================== ====================================================== ===============, Ismove: False: 5}, {Inhalt: Altes Eisen, die kleinen Geschenke haben eine Welle genommen, das Auto ist das Auto, das Auto ist das Auto, das Auto ist das Auto, das Auto ist das Auto, das Auto ist das Auto kleine Raketen zu bürsten ====================================================== ====================================================== ================================ieben =, Zeit: 30, ismove: true, colorIndex: 5}, {Inhalt: Unmittelbar nach der Klasse steigt Varo Lan auf ~~~, Zeit: 31, Ismove: true, ColorIndex: 5}, {Inhalt: Ich bin Varo Blue Continent steigt sofort zum Unterricht und steigt ~~~, Zeit: 32, Ismove: Richtig, ColorIndex: 2}, {Inhalt: Unmittelbar nach dem Unterricht steigt der Blue Continent auf und steigt auf. Zeit: 33, ismove: true, colorIndex: 2}, {Inhalt: Unmittelbar nach der Klasse steigt Varo Blue Continental auf ~~~, Zeit: 33, Ismove: True, ColorIndex: 5}, {Inhalt: Es ist nicht richtig weg und Varo Lan ist gegangen. Ismove: True, ColorIndex: 2}, {Inhalt: Sofort nach dem Unterricht wurde das Varo Lan -Festland aufgetaucht. , TestarayCopy) /*Barbite -Objekte, Parameter, Parameter, Parameter, die sie sind: 1.ismove: Ob das Flut das mobile Sperrfeuer ist, 2.SPE: Die Bewegungsgeschwindigkeit des Sperrfeuers, 3.Col: Die Farbe des Sperrfeuers, 4 .Text: Der Text der Sperrung* / /*Prototyp -Kettenmethode setzt die vertikale Koordinaten, der SetleftValue die horizontale Koordinate festlegt, das Umzug vervollständigt die Koordinatenänderung, SetID vervollständigt die ID -Werteinstellung* / Funktionskapitalisierung (ISMove, SPE, SPE, Col, text) {this.ismove = ismove this. .topindex = 0 this.occupypos = true this.top = 300 this.left = 0 this .setValue () this.settopValue ()} caption.prototype.settopValue = function () {für (var i = 0, len = topobjs .Length; i <len; .prototype.setleftValue = function () {if (this.is.is.is Move) {this.left = cavwidth} else {var contentLength = this.content.length var nowitemleft = 420 -ContentLength * 9 This.left = Nowitemleft}} caption. topIndex] .blank = true}} Zeit += 1 if (this.latesttime> 450) {topobjs [this.topIndex] .blank = true}}} cappion.prototype.setid = function () {this.id = capobjid capobjid ++} var Cap1 = Neue Abdeckung (F. Alse, 1, 0, kleine Geschenke nehmen eine Welle, doppelt -klicke 6666. Wesen Wesen Wesen ) Capobjs.push (Cap1) cap1.setid () // Kreisen Sie das Array und zeichnen Sie die Funktion DrawallText () {ctx.clearRect (0, 0, Cavhift, Cavhoht) gemäß den Attributen des Objekts (für (für (für (für var i = 0, len = capobjs. Länge; i <len; i ++) {ctx.fillstyle = capobjs [i] .Color ctx.font = BOLD 20PX Courier New Ctx.Filltext (Capobjs [[ I] .Content, ca pobjs [i] .left, capobjs [i] .top) ctx.closepath () capobjs [i] .moving () // if (capobjs [i] .left < - cavwidth) {// Capobjs.spleplice (i, 1) / /Wenn diese Anweisung excute hat, hat Will ein Fehler, weil es das Element in Array ist. ist bereits super super super lösche dies aus einem Array, wenn es die Objektfunktion erscheint. -Cavwidth ||. [i] .Time) if (nowemtime == jetzt) {// Die erste Kontrollhöhe der Kontrolle war nicht ausreichend, und dann der Platz des Platzes in settopalue // var nowitemleft = getleftValue (testArray [i]) // var DIFFTIME = MATH.ABS (NOWITEMTEMTE -LASTITEMTIM) // if (DiFftime <6) {// Capheight += 30 // CAPH acht = CHAPHELT> 400? colorIndex] varge temcap = neue caption (testArray [i] .smove, temcolor, testArray [i] .Content) capobjs [capobjs.length- 1] .setid () temcap = null testArray.Ssplice (i, 1)}}}}}} // Wenn der Benutzer auf die Rückruffunktion von SendCaption (Argument) {var Inpueleletxt = Inputele.Value var w = parseInt (Video .CurrentTime) var Inputisalue = ismoveInputele.Conted var temoBj = {Inhalt: Inpueletxt, Zeit: Now, Ismove, Ismove, Ismove, klickt : Inputismovalue, Colororindex: s OptictedColorIndex} testArray.push (temobj) inputle.value =} // Funktion getleftValue (OBJ) {// if (obj.ismove) {// return 0 //} // sonst {// var var contactLength = obj.content.length // var notemleft = 420 -contentLength * 9 // Nowed //} //} ///} // Leinwand neu starten, um die Funktion Reinitcav (Argument) {// testarray cecayarray (testarayCopy) zu ändern (testarayCopy , TestArray) capheight = 0 0 0 clearInterval (canvastimer) canvastimer = null initcanvas ()} var canvastimer = null // Initialisieren von Canvas, wenn mit dem Spielen die Funktion initiiert initiated initcanvas () {if (canvastimer == null) {canvastimer = SetInterval (argument) {drayAllText () updatearrr ay () refreshobjs (capobjs)}, 10)}} // Endfunktion initcanvas // Kopieren Sie die Array -Funktion CopyArray (arr1, arr2) {for (var i = 0, len = arr1 .Length; i <len; Fall 2: Prevselectemid = Colororitemthrid -Break; = var eventTarget = e.target eventTarget.className = selectColor var evetarid = eventTarget.substring (9) Switch (evetarid) {case Frist: SelectedColorinde x = 0 Break; ; }) // Progressive Strip ändert das Ausführungscode Video )}}, False) // Videoaufhängung von Ausführungscode Video E) {var keynum = 0 keynum = window.event? /Funktion b (aaaa) {// return aaaa () //} // b ()} // end})Ich hoffe, dass Sie Studenten helfen können, die ein Sperrfeuer machen möchten. Sie können auch zu Github gehen, um den vollständigen Projektcode herunterzuladen: GitBub -Projektadresse
Das oben genannte ist der Inhalt dieses Artikels.