Recientemente, comencé a desarrollar sitios web de video de bombardeo y logré la función del aluvión a través del lienzo en HTML5.
Entonces no hables de chismes, hablemos primero de pensar.
Idea: desde el diseño de la página, cubre un lienzo en la ventana de video generado por la etiqueta de video, y se puede lograr con un posicionamiento absoluto. Lo más importante es la exhibición del aluvión en el lienzo de control JS. y el bombardeo es el bombardeo. El objeto de bombardeo tiene métodos incluyen: establecer las coordenadas verticales horizontales del aluvión, el movimiento del aluvión. El principio de implementación es el evento en el que comienza a reproducirse el video de escucha, y se genera un temporizador cuando comienza el video que atraviesa la matriz de objeto circular y de acuerdo con los atributos del objeto cada vez. Código del aluvión, el temporizador también tiene el código para actualizar la matriz de balas.
La imagen a continuación es una captura de pantalla del efecto de aluvión
Luego inicie el código directamente:
(Function () {window.onload = function () {var video = document.getElementsByTagName (video) [0] var cav = document.getElementsByTagName (Canvas) [0] // Establezca la altura y el ancho del lienzo constante var cavwidth = 800 var cavHeight = 420 cav.Width = Cavwidth cav.height = cavheight var ctx = cav.getContext (2d) // La matriz de barril de almacenamiento objeto var Capobjs = [] var lastitemtime var ocho = 20 var inputele = documentsementementsByClassName (Subtítulo -Input-text) [0] var sendele = document.getElementsByClassName (subtition-sendButton) [0] var colorma = document.getElementsByClassName (ColorItems) [0] ar ismoveInputele = document.getElementsByClassName (Caption-Input-issove) [ 0] // El color Barrage var colores = [#fff,#ffccccc,#ccffcc,#ccccff,#ffffccc,#ccfffff] var selectColorIndex = 0 var previendo el tiempo = 0 // datos de prueba. // La matriz de versátiles en Canadá en el lienzo varitobjs = [{blank: true, valor: 20, índice: 0}, {en blanco: true, valor: 50, índice: 1}, {blank: true, valor: valor: 80, índice: 2}, {en blanco: true, valor: 110, índice: 3}, {en blanco: true, valor: 140, índice: 4}, {en blanco: true, valor: 170, índice: 5}, { en blanco: verdadero, valor: 200, índice: 6}, {en blanco: true, valor: 230, índice: 7}, {en blanco: true, valor: 260, índice: 8}, {en blanco: true, valor: 290, Índice: 9}, {en blanco: true, valor: 320, índice: 10}, {en blanco: true, valor: 350, índice: 11}, {blank: true, valor: 380, índice: 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: verdadero, colorindex: 0}, {contenido: seco, jajaja ~~~~~~, tiempo: 2, ismove: true, colorindex: 5}, {contenido: seco, jajaja ~~~~~ Tiempo: 2, Ismove: True, ColorIndex: 4}, {contenido: tostada seca, jajaja ~~~~~~, Tiempo: 2, Ismove: True, ColorIndex: 4}, {contenido: tostada seca, jajaja ~~~ ~~ ~, Tiempo: 2, IsMove: True, ColorIndex: 0}, {Content: Dry Toast, Jaja ~~~~~~, Tiempo: 2, Ismove: True, ColorIndex: 0}, {Contenido: 2333333333333333, Tiempo: 3, 3, 3, 3, Ismove: True, ColorIndex: 0}, {Content: 23333333333333333, Time: 3, IsMove: True, ColorIndex: 0}, {Content: 2333333333333333, Time: 3, IsMove: T: T Rue, ColorIndex: 0}, {Contenido : 233333333333333333, tiempo: 3, ismove: true, colorindex: 0}, {contenido: 233333333333, tiempo: 3, ismove: true, colorindex: 0}, {contenido: 233333333333333 3333, tiempo: 3, isMove: verdadero, colorindex: 0}, {contenido: 23333333333333333, tiempo: 4, ismove: false, colorIndex: 0}, {co ntent: 2333333333333333, tiempo: 5, ismove: truex: 4}, {conferencia: {conferencia: 2333333333333333, tiempo: 6, 6, Ismove: True, ColorIndex: 2}, {Content: 23333333333333333, Time: 7, IsMove: True, ColorIndex: 2}, {Content: 2333333333333333, Time: 7, IsMove: True, ColorIrIndex: 2}, {Content: 23333333333333333, Tiempo: 7, Ismove: True, ColorIndex: 2}, {Content: 23333333333333333, Time: 7, Ismov E: True, ColorIndex: 2}, {Content: 233333333333333333, Tiempo: 7, Ismove: True: True, Colorindex: 2 }, {Contenido: 2333333333333333, Time: 7, IsMove: True, ColorIndex: 2}, {Content: 233333333333333, Time: 8, ISMove: True, ColorIndex: 0}, {Content: 233333333333333, tiempo: 9, ism ove vve: True, ColorIndex: 0}, {Content: 233333333333333, Time: 10, IsMove: True, ColorIndex: 0}, {Content: El maestro dijo muy bien, quiero estudiar duro "," ", es: 12, ismove: True, ColorIndex: 0}, {Content: 老师说的非常好 我要好好学习了》》》》 我要好好学习了》》》》, Time: 13, IsMove: True, ColorIndex: 0}, {Content: 老师说的非常好 ， 我要好好学习了》》》》, tiempo: 14, ismove: verdadero, colorindex: 2}, {contenido: el maestro dijo muy bien, quiero estudiar mucho "" "" ", es: 15, ismove: falso, colorindex: 0}, {contenido: profesor: profesor dijo muy bien, quiero estudiar mucho "" "" "", 16, ismove: verdadero, colorindex: 2}, {contenido: el maestro dijo muy bien, quiero estudiar "" "" ", IsMove: True, ColorIndex: 3}, {Contenido: el maestro dijo muy bien, quiero estudiar mucho" "" ", Tiempo: 18, IsMove: True, ColorIndex: 2}, {Contenido: el maestro dijo muy bien, quiero estudiar mucho "" "" ", Tiempo: 19, Ismove: True, ColorIndex: 0}, {Contenido: el maestro dijo muy bien, quiero estudiar bien" "" "" "", 20, ismove: verdadero: Verdadero: Verdadero: Verdadero: Verdadero: Verdadero: Verdadero: True: True: True: True: True: True: True: True: True: True: True: True: True: : verdadero: verdadero, colorindex: 3}, {contenido: el maestro dijo muy bien, quiero estudiar mucho "" "" "", tiempo: 21, ismove: true, colorindex: 0}, {conferencia: el maestro dijo Muy bien, quiero ser bueno, quiero ser bueno. Se cepilla el cohete pequeño =========, Tiempo: 23, Ismove: True, ColorIndex: 0}, {contenido: hierro viejo, los regalos pequeños han tomado una ola, los cohetes pequeños se cepillan ===== ==============: True, ColorIndex: 0}, {contenido: hierro antiguo, pequeños regalos han tomado una ola, pequeños cohetes de autos cepillados =======, tiempo: 25, ismove: verdadero, colorindex: 3: 3}, {contenido: hierro antiguo, los regalos pequeños han tomado una ola, los cohetes pequeños se cepillan =========, tiempo: 26, ismove: verdadero, verdadero, ColorIndex: 0}, {Contenido: Viejo: hierro viejo, pequeños regalos han tomado una ola, los pequeños cohetes del automóvil se cepillan =========, Tiempo: 27, Ismove: True, ColorIndex: 5} , {contenido: hierro antiguo, regalos pequeños Go Its a Wave, el pequeño cohete de automóvil lo cepilla ================================= ==================================================== ==================================================== ==============, Ismove: False: 5}, {contenido: hierro antiguo, los pequeños regalos han tomado una ola, el auto es el automóvil, el auto es el automóvil, el auto es el auto, el auto es el auto, el auto es el auto pequeños cohetes para cepillar ================================= ==================================================== ==================================================== =====================================, Ismove: el viejo cohete de TRUTEX ======== =, Tiempo: 30, IsMove: True, ColorIndex: 5}, {contenido: inmediatamente después de la clase, Varo Lan está subiendo ~~~, Tiempo: 31, IsMove: True, ColorIndex: 5}, {Contenido: I'm Yendo a la clase de inmediato, Varo Blue Continent se está levantando ~~~, Tiempo: 32, Ismove: Verdadero, ColorIndex: 2}, {Contenido: inmediatamente después de la clase, Varo Blue Continent sube y se levanta. Tiempo: 33, IsMove: True, ColorIndex: 2}, {contenido: inmediatamente después de la clase, Varo Blue Continental se eleva ~~~, Tiempo: 33, IsMove: True, ColorIndex: 5}, {Content: está fuera de clase correcto lejos, y la lan de varo se ha ido. ismove: verdadero, colorindex: 2}, {contenido: de inmediato: inmediatamente después de la clase, la vara lan continental apareció ~~~, tiempo: 37, ismove: true, colorindex: 2}] // respalda los datos de prueba (testArray , TestArayCopy) /*Barbite Objects, parámetros, parámetros, parámetros que son: 1.Ismove: si el aluvión es el aluvión móvil, 2.spe: la velocidad de movimiento del aluvión, 3.col: el color del aluvión, 4 .Text: El texto del Barrage* / / /*Método de cadena prototipo SetTopvalue establece las coordenadas verticales, el setleftValue establece la coordenada horizontal, el movimiento completa el cambio de coordenadas, setid completa la configuración de valor de ID* / cexction (isMove, spe, Col, texto) {this.ismove = isMove this. .TopIndex = 0 this.OccupyPos = true this.top = 300 this.left = 0 this .setValue () this.settopValue ()} subtitty.prototype.settopValue = function () {for (var i = 0, len = topobjs .Length; .prototype.setleftValue = function () {if (this.is.is.is.is Move) {this.left = cavwidth} else {var contentLength = this.content.length var nowitemleft = 420 -contentLength * 9.Lttttt = Nowitemleft}} Título. topIndex] .Blank = true}} time += 1 if (this.latesttime> 450) {topobjs [this.topindex] .Blank = true}}} Cappion.prototype.setid = function () {this.id = Capobjid Capobjid ++} var cap1 = nueva capting (F. alse, 1, 0, los regalos pequeños toman una onda, doble clic 6666. Esencia Esencia Esencia ) Capobjs.push (cap1) cap1.setid () // círculo la matriz y dibuja la función DrawallText () {CTX.CLEARRECT (0, 0, Cavheighth, Cavheight) de acuerdo con los atributos del objeto para (para (para (para (para (para (para (para (para (para (para (para ( (para (para (para var i = 0, len = capobjs. longitud; 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.Splice (i, 1) / /If Excute esta declaración, tendrá fallas porque el elemento en la matriz es nulo // La solución es: Escriba una nueva función para actualizar la matriz //}} // Actualizar la matriz, el objeto ya es super Super Super Elimine esto de una matriz cuando sale de la función del objeto refreshobjs (objs) {for (var i = objs.length -1; i> = 0; i-) {if (ibjs [i] .let < -Cavwidth || objs [i] .latesttime> 450) {objs.splice (i, 1)}}} // Actualizar la matriz de la matriz de la función del objeto de bombardeo ,; [i] .Time) if (nowitemtime == ahora) {// La primera altura de control del control no era suficiente, y luego la forma de espacio en setTopValue // var nowitemleft = getLeftValue (tasteRray [i]) // var Difftime = math.abs (NowItemTime -lastitemTime) // if (difftime <6) {// capheight += 30 // caph ocho = capheight> 400? ColorIndex] varge temcap = newtittion (tasteArray [i] .smove, Temcolor, tEcTArray [i] .content)) Capobjs [Capobjs.length- 1] .setId () temcap = null testArray.splice (i, 1)}}}} // Cuando el usuario hace clic en la función de devolución de llamada de Send SendCaption (argumento) {var inputeletxt = inputele.Value var w = parseInt (video .CurrentTime) var inputisMovalue = isMoveInputele. verificación var TemObj = {Content: inputelTxt, Time: Now, IsMove, IsMove : InputisMovalue, colororIndex: S ElectedColorIndex} tieTArray.push (temoBJ) inputle.value =} // function getleftValue (obj) {// if (obj.ismeve) {// return 0 //} // else {// ContactLength = obj.content.length // var notEmleft = 420 -contentLength * 9 // returnited //} //} ///} // reiniciar lienzo para cambiar la función reinitcav (argumento) {// testArray copyArray (testarayCopyCopy (testaraycopy , TestArray) CapHeight = 0 0 0 0 0 0 ClearInterval (Canvastimer) Canvastimer = NULL initCanVas ()} var canvastimer = null // inicializar lienzo, al comenzar a reproducir, la función iniciada initcanvas () {if (canvastimer == null) {canvastimer = = SetInterval (argumento) {drawAllText () updateArrr Ay () refreshobjs (Capobjs)}, 10)}} // Función final initCanvas // Copiar la función de matriz copyArray (arr1, arr2) {for (var i = 0, len = arr1 .Length; Caso 2: PrevelectidemID = ColorIntemThrid Break; = var EventTarget = E.Target EventTarget.ClassName = SelectColor Var EVETARID = EventTarget.SubString (9) Switch (EVETARID) {Case Frist: SelectedColorinde x = 0 Break ; }) // La tira progresiva cambia el código de ejecución video.AdDeventListener (TimeUpdate, function () {var NowPlayTime = Video.CurrentTime Var diftime = Math.abs (NowPlayTime-S ME) PrevlayTime = NowPlayTime if (difftime> 1) {ReinitCav ( )}}, Falso) // suspensión de video del código de ejecución video.AdDeventListener (pause, function () {clearInterval (CanVastimer) Canvastimer = null}) ck, sendcaption) // Ingrese Ingrese IncentDele.AdDeventListener (tecla Takedown, function (function (Function (Function (Function (Function ( E) {var keyNum = 0 keyNum = Window.event? /función b (aaaa) {// return aaaa () //} // b ()} // end})Espero poder ayudar a los estudiantes que desean hacer un aluvión, también puede ir a GitHub para descargar el código de proyecto completo: la dirección del proyecto GitBub
Lo anterior es todo el contenido de este artículo.