localisation actuelle: Maison > Télécharger > Effets JS > effets spéciaux HTML5 > effets spéciaux d'animation de chute de ligne de toile html5
effets spéciaux d'animation de chute de ligne de toile html5
Classer: Effets JS / effets spéciaux HTML5 | Temps de libération: 2018-02-27 | visites: 1484 |
Télécharger: 55 |
Derniers téléchargements
Aquarium Fantastique
Filles en première ligne
Ailes d'étoiles
Petite Fée des Fleurs Paradis Féérique
Restaurant Histoire mignonne
Exploration de voyage à Shanhe
Amour et producteur
Le cerveau le plus puissant 3
Odd Dust : Damila
Jeune voyage vers l'Ouest 2
24 heuresClassement de lecture
- 1 Dead Rising Deluxe Remaster : Comment prendre une photo humoristique de 1 000 PP pour le défi photo de Kent
- 2 Objets en JavaScript
- 3 Principales API gratuites à connaître
- 4 Mise à l'échelle de Node.js avec le module Cluster
- 5 Comment synchroniser vos contacts avec votre téléphone ? Implémentation de CardDAV dans Go!
- 6 Nouvelles valeurs et fonctions en CSS
- 7 EchoAPI vs Insomnia : une comparaison complète avec des exemples pratiques
- 8 Guide des raccourcis Dead Rising Deluxe Remaster : comment débloquer le raccourci Wonderland et Tunnels
- 9 Présentation de la mise à niveau ultime du développeur Java JDK avec des améliorations avancées de l'IA
- 10 Dead Rising Deluxe Remaster : Tous les survivants et où les trouver
- 11 Conseils pour tester les tâches en file d'attente dans Laravel
- 12 Le portefeuille associé à Ripple déplace 100 millions de XRP au milieu de la chaleur juridique
- 13 Le prix du Bitcoin (BTC) dépasse 62 000 $ alors que 88 % des HODLers sont assis sur des bénéfices papier
- 14 Comment réparer Tailwind CSS ne fonctionne pas dans Next.js
- 15 Le marché des pièces meme se réchauffe alors que le rallye Dogecoin (DOGE), Shiba Inu (SHIB) et Popcat (POPCAT)
Derniers tutoriels
-
- Aller au langage pratique GraphQL
- 1636 2024-04-19
-
- Premiers pas avec MySQL (Professeur Mosh)
- 1529 2024-04-07
-
- Mock.js | Axios.js | Json | Dix jours de cours de qualité
- 2381 2024-03-29
L'effet d'animation de chute de ligne du canevas HTML5 est un effet d'animation de chute de ligne qui est quelque peu similaire à la pluie.
(fonction(){
var c = document.getElementById("c"),
ctx = c.getContext("2d");
c.width = innerWidth;
c.height = innerHeight;
var lignes = [],
maxSpeed = 5,
espacement = 5,
xEspacement = 0,
n = innerWidth / espacement,
couleurs = ["#3B8686", "#79BD9A", "#A8DBA8", "#0B486B"],
je;
pour (i = 0; i < n; i++){
xSpacing += espacement ;
lignes.push({
x : xEspacement,
y : Math.round(Math.random()*c.height),
largeur : 2,
hauteur : Math.round(Math.random()*(innerHeight/10)),
vitesse : Math.random()*maxSpeed + 1,
couleur : couleurs[Math.floor(Math.random() * colours.length)]
});
}
fonction dessiner(){
var je;
ctx.clearRect(0,0,c.width,c.height);
pour (i = 0; i < n; i++){
ctx.fillStyle = lignes[i].color;
ctx.fillRect(lines[i].x, lignes[i].y, lignes[i].width, lignes[i].height);
lignes[i].y += lignes[i].speed;
si (lignes[i].y > c.hauteur)
lignes[i].y = 0 - lignes[i].hauteur;
}
requestAnimationFrame(draw);
}
dessiner();
}());