Je n’ai pas l’intention d’enseigner la toile, j’y ai juste jeté un œil parce que je pensais que c’était amusant.
Ça veut dire que c'est un peu dur, alors ne me critique pas. .
EffetLa fréquence d'images est légèrement inférieure, mais les performances réelles sont bien sûr beaucoup plus fluides.
Implémenter HTML
<!DOCTYPE html><head> <meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0> <style> * { marge : 0 ; rembourrage : 0 ;} corps {couleur de fond : bleu clair ;} #canvas {couleur de fond : noir ; largeur : 100 vw ;} </style></head><body> <canvas id=canvas></canvas> <script>/* Voir ci-dessous*/</script></body>JS
window.onload = function () { let // Canvas ctx = document.getElementById('canvas').getContext('2d'), // Taille du canevas canvas_width = document.getElementById('canvas').width, canvas_height = document .getElementById('canvas').height, // Couleur du texte, police, couleur d'arrière-plan de l'icône du DVD text_color = ['green', 'bleu', 'violet', 'jaune', 'blanc', 'jaune', 'blanc'], text_font = 'italique gras 50px yahei', background_color = ['rouge', 'orange', 'jaune', ' green', 'blue', 'indigo', 'violet'], // La taille du rectangle d'arrière-plan background_width = 110, background_height = 50, // Lors de l'ajout de texte au rectangle, la hauteur dévie un peu fix_height = 7, // Vitesse, chaque redessin se déplace de 0,5 px speed_x = 0,5, speed_y = 0,5, // Direction de déplacement, initialement 'rb' direction inférieure droite = 'rb', // Coordonnées x et y de l'icône, initialement 0 position_x = 0, position_y = 0, // Nombre de collisions, utilisé pour calculer le nombre de couleurs d'arrière-plan et de texte = 0 dvd() function dvd() { // Changement de direction de déplacement (direction) { // Cas inférieur droit 'rb' : position_x += speed_x position_y += speed_y break // Cas supérieur droit 'rt' : position_x += speed_x position_y -= speed_y break // Cas inférieur gauche 'lb' : position_x -= speed_x position_y += speed_y break // Cas supérieur gauche 'lt' : position_x -= speed_x position_y -= speed_y break } // Effacer le canevas ctx.clearRect(0, 0, canvas_width, canvas_height) // Redessiner ctx.fillRect(position_x, position_y, background_width, background_height) // Détection de collision // Bottom if (position_y + background_height > = hauteur_toile) { direction = direction.replace('b', 't') // Nombre de collisions += 1 } // Droite si (position_x + background_width >= canvas_width) { direction = direction.replace('r', 'l') count += 1 } // Gauche if (position_x < 0) { direction = direction.replace(' l', 'r') count += 1 } // supérieur if (position_y < 0) { direction = direction.replace('t', 'b') count += 1 } // Texte ctx.font = text_font ctx.fillStyle = text_color[count % 7] ctx.fillText(DVD, position_x, position_y + background_height - fix_height) // Couleur d'arrière-plan ctx.fillStyle = background_color[count % 7] // Démarrer la fenêtre d'animation. demandeAnimationFrame(dvd) }}Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.