No tengo la intención de enseñar lienzo, solo le eché un vistazo porque pensé que era divertido.
Significa que es un poco duro, así que no me critiques. .
EfectoLa velocidad de fotogramas es ligeramente inferior, pero el rendimiento real es, por supuesto, mucho más fluido.
Implementar HTML
<!DOCTYPE html><head> <meta nombre=viewport content=ancho=ancho del dispositivo, escalable por el usuario=no, escala inicial=1.0, escala máxima=1.0, escala mínima=1.0> <estilo> * { margen: 0; relleno: 0;} cuerpo {color de fondo: azul claro;} #canvas {color de fondo: negro; ancho: 100vw;} </style></head><body> <canvas id=canvas></canvas> <script>/* Ver más abajo*/</script></body>js
window.onload = function () { let // Lienzo ctx = document.getElementById('canvas').getContext('2d'), // Tamaño del lienzo canvas_width = document.getElementById('canvas').width, canvas_height = documento .getElementById('canvas').height, // Color del texto, fuente, color de fondo del icono del DVD text_color = ['green', 'azul', 'púrpura', 'amarillo', 'blanco', 'amarillo', 'blanco'], text_font = 'cursiva negrita 50px yahei', background_color = ['rojo', 'naranja', 'amarillo', ' green', 'blue', 'indigo', 'violet'], // El tamaño del rectángulo de fondo background_width = 110, background_height = 50, // Al agregar texto al rectángulo, la altura se desvía un poco fix_height = 7, // Velocidad, cada redibujado se mueve 0.5 px speed_x = 0.5, speed_y = 0.5, // Dirección de movimiento, inicialmente 'rb' dirección inferior derecha = 'rb', // Coordenadas x e y del icono, inicialmente 0 position_x = 0, position_y = 0, // Número de colisiones, utilizado para calcular el recuento de colores de fondo y texto = 0 dvd() function dvd() { // Cambio de dirección de movimiento (dirección) { // Mayúscula inferior derecha 'rb': position_x += speed_x position_y += speed_y break // Mayúscula superior derecha 'rt': position_x += speed_x position_y -= speed_y break // Mayúscula inferior izquierda 'lb': position_x -= speed_x position_y += speed_y break // Mayúscula superior izquierda 'lt': position_x -= speed_x position_y -= speed_y break } // Limpiar el lienzo ctx.clearRect(0, 0, canvas_width, canvas_height) // Redibujar ctx.fillRect(position_x, position_y, background_width, background_height) // Detección de colisiones // Inferior if (position_y + background_height > = canvas_height) { dirección = dirección.replace('b', 't') // Conteo de colisiones += 1 } // Derecha si (position_x + background_width >= canvas_width) { dirección = dirección.replace('r', 'l') count += 1 } // Izquierda if (position_x < 0) { dirección = dirección.replace(' l', 'r') cuenta += 1 } // superior si (posición_y < 0) { dirección = dirección.reemplazar('t', 'b') cuenta += 1 } // Texto ctx.font = text_font ctx.fillStyle = text_color[count % 7] ctx.fillText(DVD, position_x, position_y + background_height - fix_height) // Color de fondo ctx.fillStyle = background_color[count % 7] // Inicia la ventana de animación. solicitarAnimationFrame(dvd) }}Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.