Não pretendo ensinar tela, só dei uma olhada porque achei divertido.
Significa que é um pouco difícil, então não me critique. .
EfeitoA taxa de quadros é um pouco menor, mas o desempenho real é obviamente muito mais suave.
Implementar HTML
<!DOCTYPE html><head> <meta name=viewport content=width=device-width, user-scalable=no, escala inicial=1,0, escala máxima=1,0, escala mínima=1,0> <estilo> * { margem: 0; preenchimento: 0;} corpo {cor de fundo: azul claro;} #canvas {cor de fundo: preto; largura: 100vw;} </style></head><body> <canvas id=canvas></canvas> <script>/* Veja abaixo*/</script></body>JS
window.onload = function () { let // Canvas ctx = document.getElementById('canvas').getContext('2d'), // Tamanho da tela canvas_width = document.getElementById('canvas').width, canvas_height = document .getElementById('canvas').height, // Cor do texto, fonte, cor de fundo do ícone do DVD text_color = ['green', 'azul', 'roxo', 'amarelo', 'branco', 'amarelo', 'branco'], text_font = 'itálico negrito 50px yahei', background_color = ['vermelho', 'laranja', 'amarelo', ' green', 'blue', 'indigo', 'violet'], // O tamanho do retângulo de fundo background_width = 110, background_height = 50, // Ao adicionar texto ao retângulo, a altura desvia um pouco fix_height = 7, // Velocidade, cada redesenho se move 0,5 px speed_x = 0,5, speed_y = 0,5, // Direção do movimento, inicialmente 'rb' direção inferior direita = 'rb', // Coordenadas x e y do ícone, inicialmente 0 position_x = 0, position_y = 0, // Número de colisões, usado para calcular a contagem de cores de fundo e de texto = 0 dvd() function dvd() { // Mudança de direção do movimento (direção) { // Minúsculo direito 'rb': position_x += speed_x position_y += speed_y break // Maiúscula superior direita 'rt': position_x += speed_x position_y -= speed_y break // / Maiúscula inferior esquerda 'lb': position_x -= speed_x position_y += speed_y break // Maiúscula superior esquerda 'lt': position_x -= speed_x position_y -= speed_y break } // Limpa a tela ctx.clearRect(0, 0, canvas_width, canvas_height) // Redesenhe ctx.fillRect(position_x, position_y, background_width, background_height) // Detecção de colisão // Parte inferior if (position_y + background_height > = canvas_height) { direção = direção.replace('b', 't') // Contagem de colisões += 1 } // Direita if (position_x + background_width >= canvas_width) { direção = direção.replace('r', 'l') contagem += 1 } // Esquerda if (posição_x < 0) { direção = direção.replace(' l', 'r') contagem += 1 } // superior if (posição_y < 0) { direção = direção.replace('t', 'b') contagem += 1 } // Text ctx.font = text_font ctx.fillStyle = text_color[count % 7] ctx.fillText(DVD, position_x, position_y + background_height - fix_height) // Cor de fundo ctx.fillStyle = background_color[count % 7] // Inicia a janela de animação. requestAnimationFrame(DVD) }}O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.