HTML usa tela para obter função de barragem

Recentemente, você precisa fazer um jogador de barragem quando estiver fazendo grandes lições de casa. Lembrei -me do código -fonte de outras pessoas e re -reealizado, e a demonstração é a seguinte

Navio

Defina a cor, velocidade e tipo de barragem

Exibir barragem

Não é possível tela cheia

A tela não se adapta à adaptação

Sem controle de jogador personalizado

A barragem correspondente não é exibida de acordo com o tempo de reprodução

A barragem não pode ser suspensa

Defeitos conhecidos serão melhorados no futuro. O código -fonte do player de barragem que pode ser encontrado na Internet geralmente faz de uma barragem rolante sem uma barragem estática.

O núcleo de todo o jogador é desenhar o texto e fazer animações de texto.

Primeiro, adicione tags de vídeo e cabos de tela em arquivos HTML

 <div id = barrageplayer> <canvas id = cv_video width = 900px altura = 450px> </canvas> <id de vídeo = v_video src = test.mp4 controles = video/mp4>/video> </div>

Defina o estilo de posição da tag de tela como positivo: absoluto e, em seguida, o vídeo e a tela são sobrepostos juntos. Em seguida, adicione o conteúdo da barragem à tela.

 var c = Document.getElementById (CV_VIDEO); As informações da tela foram obtidas e definidas, e a mulher inteligente é difícil de cozinhar sem arroz. , spey) {this.content = content; if (this.Type == Top Static) {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;}}}}}

O objeto de barragem construído inicializa vários parâmetros, incluindo conteúdo, cor, tipos de movimento e velocidade, definindo o método move () para controlar o movimento da barragem, cada método move () de rolar uma velocidade unitária para a esquerda toda vez que deixa o Método esquerdo à esquerda

Depois que o construtor do objeto de barragem é concluído, o tema é inserido, a produção de animação, diretamente no código

 // círculos e tela para alcançar o efeito de animação setInterval (function () {ctx.clearrect (0,0, c_width, c_height); ctx.save (); para (var i = 0; i <msgs.length; i + +) {) {) {if (msgs [i]! = null) {if (msgs [i] .type == default) {handleDefault (msgs [i]);} else {handlestate (msgs [i]); }}}}, 20)

Execute -o a cada 20ms, ctx.clearrct (0,0, c_width, c_height); Lista de barragem, quando uma barragem é enviada, a instância da barragem será adicionada à lista) e, em seguida, processada separadamente de acordo com a barragem do estilo padrão ou do estilo estático. Se for a barragem de estilo padrão, ela será processada de acordo com os seguintes métodos

 // Processar a função de estilo de barragem padrão HandleDefault (barrage) {if (barrage.left == indefinido || barrage.left == null) {barrage.left = c.width;} else (barrag e.left <-200) {barrage = null;} else {barrage.move () ctx.fillstyle = barrage.color;

Primeiro, se a instância da barragem não definir o atributo esquerdo, a largura da tela será fornecida a ele. da instância da barragem para alterar o valor do atributo esquerdo, defina a cor do texto, escreva um novo texto no primeiro nível e restaure a tela. Isso completa um quadro de animação.

O método de implementação de barragem estática é o seguinte

 // Tratamento das funções de estilo estático (barragem) {ctx.moveto (c_width/2, barragem.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 ;

Primeiro, o ponto base da tela é movido para o centro da tela. para esta tela. Em seguida, defina o alinhamento do texto no alinhamento do meio, defina o estilo de texto e preencha o texto. Como a barragem é estática, não há necessidade de desacelerar, mas a barragem estática também desaparecerá. Para não ocupar os atributos adicionais aqui, usamos diretamente o atributo esquerdo como uma posição de logotipo, o que também diminui o atributo esquerdo. Dessa maneira, é realizado o processamento da barragem estática.

Outras pessoas que têm uma certa base sobre a configuração de cores e estilo devem ser fáceis de dominar e não a apresentar aqui.

Este projeto usa principalmente a tela para desenho de texto e animação lenta do texto.

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

Acontece que eu não consigo entender com salvar () e restaurar () agora, eu tenho um pouco de entendimento. Antes de modificar o estado da tela. Como quando eu lide com a barragem estática, o ponto base da tela foi alterado, de modo que o método de liberação da tela original não é mais aplicável à tela atual. Em seguida, retorne à tela original.

Código de execução

 <! UAA -Compatible Content = ie = Edge> <title> Inline-Black;} #white {Background: white;} #red {Background: #ff6666;} #yellow {Background: #ffff00;} #blue { #333399;} #Green {Background: #33933;} #CV_VIDEO { Posição: Absoluto; ;} </style> <body> <div id = barrageplayer> <mvas id = cv_video width = 900px Height = 450px> </canvas> <Id de vídeo = v_video src = teste .mp4 controles tipo = vídeo/mp4> </////// Vídeo> </div> <div id = barrageInput> <div> <tipo de entrada = ID do texto = smsg espaço espaço = digite o conteúdo da barragem/> <botão id = send> </butut> </div> <div id = colorpick> <div class = pickdiv id = branco> </div> <div class = pickdiv id = vermelho> </div> <div class = pickdiv id = amarelo> </div> </div> class = pickdiv id id = Azul> </div> <div class = pickdiv id = verde> </div> </div> <div id = typepick> <type de entrada = nome do rádio = tipo = defaul t> por padrão <tipo de entrada = nome do rádio Nome = Valor do tipo = Topo estático> Top estático <Tipo de entrada = Nome do Rádio = Tipo Valor = Bottom Static> Bottom Static </div> <Div Id = Speedpick> <Tipo de entrada = Nome do Rádio = Valor da Velocidade = 1> 1x <Tipo de entrada = nome do rádio = Valor de velocidade = 2> 2x <Tipo de entrada = nome do rádio = Valor da velocidade = 3> 3x </div> <div id = stylepick> </div> <cript> var c = document.getElementById (cv_video); Var typEdom = documental.getElementsByName (tipo); 1 Tipo var = padrão; addEventRistener ('clique', função) {switch (event.target.id) {case white: color = white; Color =#339933; comprimento; Speeddom [i] .Comemente) {Speed ​​= 2*Parseint (Speeddom [i]. Valor); ;} // // A função das peças de barragem // // o objeto de barragem (conteúdo, cor, tipo, velocidade) {this.content = content; = Velocidade; Parseint ((c_Height/2) -math.random ()*c_height/2) +10;} else if (this.type == estático) {th is .Height = parseint ((c_height/2) +math.random ()*c_height/2) +10;} if (typeof this.move! = function) {barrage.prototype.move = fuins {if (this. type == default) {this.left = this.left-this. Speed;}}} // Circule a tela do efeito de animação setInterval; Null) {if (msgs [i] .Type == default) {handleDefault (msgs [msgs [i]);} else {handlestatic (msgs [i]);}}}, 20) // Processar o estilo padrão barragem function handleDefault (barrage) {if (barrage.left == indefinido || 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, barragem.Height); Esquerda == Undefinido || Barragem.Left == NULL) {Barrage.Left = C. = null;

O acima é o HTML introduzido pelo editor para usar o Canvas para implementar a função de barragem. Muito obrigado pelo seu apoio ao site VevB Wulin!