HTML usa lienzo para lograr la función de bombardeo

Recientemente, debe hacer un jugador de bombardeo cuando esté haciendo una gran tarea. He recordado el código fuente de otros y rerealizado, y la demostración es la siguiente

Buque

Establezca el color, la velocidad y el tipo de bombardeo

Muestra el bombardeo

No se puede pantalla completa

El lienzo no se adapta a la adaptación

No hay control de jugador personalizado

El aluvión correspondiente no se muestra de acuerdo con el tiempo de reproducción

El aluvión no se puede suspender

Los defectos conocidos mejorarán en el futuro. El código fuente del jugador de bombardeo que se puede encontrar en Internet generalmente solo hace que el aluvión sea un aluvión estático.

El núcleo de todo el jugador es dibujar texto y hacer animaciones de texto.

Primero agregue etiquetas de video de video y cables de lona en archivos HTML

 <Div id = BarragePlayer> <Canvas id = CV_VIDEO Width = 900px Height = 450px> </Canvas> <video id = v_video src = test.mp4 controls = video/mp4>/video> </div>

Establezca el estilo de posición de la etiqueta de lienzo en positivo: absoluto y luego el video y el lienzo se superponen. Luego agregue el contenido del aluvión al lienzo.

 var c = document.getElementById (cv_video); ; , 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 .Height = parseInt ((c_height/2) +math.random ()*c_height/2) +10;} if (typeOf this.move! = Function) {Barrage.prototype.move. type == default) {this.left = this.left-this.speed;}}}}}

El objeto de bombardeo construido inicializa varios parámetros, incluidos el contenido, el color, los tipos de movimiento y la velocidad, definiendo el método Move () para controlar el movimiento del aluvión, cada método de movimiento () para rodar una velocidad unitaria a la izquierda cada vez para izquierda. Método izquierdo a la izquierda.

Una vez que se completa el constructor del objeto Barrage, se ingresa el tema, la producción de animación, directamente en el código

 // círculos y lienzos para lograr el efecto de animación 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) {handleDefault (msgs [i]);} else {handLestate (msgs [i]); }}}}, 20)

Ejecutarlo cada 20 ms, CTX.CLEARRCT (0,0, c_width, c_height); Lista de bombardeo, cuando se envía un aluvión, la instancia de bombardeo se agregará a la lista), y luego se procesará por separado de acuerdo con el aluvión del estilo predeterminado o el estilo estático. Si es el aluvión de estilo predeterminado, se procesará de acuerdo con los siguientes métodos

 // procesa la función de estilo de bombardeo predeterminada 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 = Barray.color;

En primer lugar, si la instancia de bombardeo no establece el atributo izquierdo, el ancho del lienzo se le da. de la instancia de bombardeo para cambiar el valor del atributo izquierdo y luego configure el color del texto, escriba un texto nuevo en el primer nivel y restaura el lienzo. Esto completa un marco de animación.

El método de implementación del aluvión estática es el siguiente

 // Tratamiento de funciones de estilo de bombardeo estático (Barrage) {CTX.Moveto (C_Width/2, Barray.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 ;

En primer lugar, el punto base del lienzo se mueve al centro del lienzo. a este lienzo. Luego establezca la alineación del texto en la alineación media, establezca el estilo de texto y complete el texto. Debido a que el aluvión es estático, no hay necesidad de reducir la velocidad, pero el aluvión estático también desaparecerá. Para no ocupar los atributos adicionales aquí, usamos directamente el atributo izquierdo como posición del logotipo, lo que también disminuye el atributo izquierdo. De esta manera, se realiza el procesamiento del bombardeo estático.

Otras personas que tienen una cierta base sobre la configuración de color y estilo deben ser fáciles de dominar y no presentarla aquí.

Este proyecto utiliza principalmente lienzo para el dibujo de texto y la animación lenta del texto.

 Canvasdom.getConotext () Canvas.save () /canvas.restore () Canvas.ClearRect () Canvas.moveto ()

Resulta que no puedo entenderlo con Save () y restaurar (). Ahora tengo un poco de comprensión. Antes de modificar el estado de lienzo. Al igual que cuando manejo el aluvión estático, se ha cambiado el punto base del lienzo, por lo que el método de espacio libre del lienzo original ya no es aplicable al lienzo actual. Luego regrese al lienzo original.

Código de ejecución

 <! UAA -Compatible Content = ie = Edge> <title> inline-black;} #white {fondo: blanco;} #red {en segundo plano: #ff6666;} #yellow {en segundo plano: #ffff00;} #blue { #333399;} #green {fondo: #339933;} #cv_video { Posición: Absoluto; ;} </ystye> <body> <div id = BarragePlayer> <mvas id = cv_video width = 900px Height = 450px> </Canvas> <Video ID = v_video src = test .mp4 Controls type = Video/mp4> <// Video> </div> <div id = BarrageInput> <div> <input type = text id = smsg placeHolder = Por favor ingrese el contenido de bombardeo/> <button id = send> </button> </div> <div id = = colorpick> <div class = pickdiv id = white> </div> <div class = pickdiv id = rojo> </div> <div class = pickdiv id = amarillo> </div> </div> div class = pickdiv id = Azul> </div> <div class = pickdiv id = verde> </div> </div> <div id = typick> <input type = radio name = type = defaul t> por defecto <input type = name de radio = Type value = static top> static top <input type = radio name = type valor = fondo estático> fondo estático </div> <div id = speedpick> <input type = radio name = speed value = 1> 1x <type de entrada = Radio name = Value de velocidad = 2> 2x <input type = Radio name = Speed ​​value = 3> 3x </div> <div id = stylepick> </div> <script> var c = document.getElementById (cv_video); Var typedom = document.getElementsByName (type); 1; AddEventRistener ('Haga clic en', funciones) Color =#339933; longitud; Speeddom [i] .Calvado) {Speed ​​= 2*ParseInt (Speeddom [i]. Valor); ;} // // La función de las piezas de bombardeo // // el objeto de bombardeo (contenido, color, tipo, velocidad) {this.content = content; = Velocidad; ParseInt ((c_height/2) -math.random ()*c_height/2) +10;} else if (this.type == Bottom static) {th is .height = parseint ((c_height/2) +math.random ()*c_height/2) +10;} if (typeof este.move! = function) {Barrage.prototype.move = fuins {if (this. type == default) {this.left = this.left-this. velocidad;}}} // Circle el lienzo del efecto de animación setInterval ;; Nulo) {if (msgs [i] .type == default) {handleDefault (msgs [msgs [i]);} else {handlestatic (msgs [i]);}}}, 20) // Procesar el estilo de bombardeo predeterminado función 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; {ctx.moveto (c_width/2, Barray.Height); Left == Undefined || = nulo; //ctx.restore ();

Lo anterior es el HTML presentado por el editor para usar el lienzo para implementar la función de bombardeo. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!