interface Web
js tutoriel
Partager des exemples de la façon dont Canvas implémente l'animation de pluie
Partager des exemples de la façon dont Canvas implémente l'animation de pluie
J'ai vu une animation d'effet de pluie réalisée avec Canvas sur codepen, qui était assez intéressante. J'ai fait quelques recherches et je partagerai ici les techniques de mise en œuvre.
Capture d'écran de l'effet :
Bases de l'animation sur toile
Vous le savez, Canvas n’est en réalité qu’une planche à dessin. Nous pouvons utiliser l'API Canvas pour y dessiner divers graphiques.
API Canvas 2D : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
Ensuite, les étapes pour dessiner une animation avec Canvas sont :
Dessinez la première image graphique (à l'aide du dessin API)
Effacez le plan de travail (appliquez clearRect() ou fillRect())
Dessiner la prochaine image d'animation
Qu'est-ce qui est utilisé pour contrôler le temps de dessin de chaque image d'animation ? Il est facile pour tout le monde de penser à window.setInterval() et window.setTimeout(). Oui, vous pouvez également utiliser ces deux-là. De plus, une nouvelle méthode est apparue plus tard : window.requestAnimationFrame(callback).
requestAnimationFrame indique au navigateur que vous souhaitez dessiner une animation. Laissez le navigateur appeler votre méthode spécifiée (rappel) pour dessiner votre animation lorsqu'il souhaite la redessiner.
La méthode d'utilisation est la suivante :
function anim() {
ctx.fillStyle = clearColor;
ctx.fillRect(0,0,w,h);
for(var i in drops){
drops[i].draw();
}
requestAnimationFrame(anim);
}Généralement, l'utilisation de requestAnimationFrame en premier peut maintenir la fréquence de dessin de l'animation cohérente avec la fréquence de redessin du navigateur. . Malheureusement, la compatibilité de requestAnimationFrame n'est pas encore très bonne. IE9 et versions antérieures et Addroid 4.3 et versions antérieures ne semblent pas prendre en charge cet attribut. Les navigateurs qui ne le prennent pas en charge doivent utiliser setInterval ou setTimeout pour des raisons de compatibilité.
Effet de chute de goutte de pluie
Tout d'abord, parlons de la façon de créer l'effet de chute de goutte de pluie. La goutte de pluie est en fait un rectangle, puis l'image rémanente est ajoutée. Le dessin des images rémanentes peut être considéré comme la clé pour savoir où se trouvent les gouttes de pluie. L'image rémanente est un effet produit en dessinant un arrière-plan translucide et un rectangle à chaque image dans le sens avant, puis en superposant les graphiques précédemment dessinés. Étant donné que les graphiques vers l'avant sont dessinés en dernier, ils apparaissent plus clairs et les graphiques vers l'arrière sont davantage superposés, ils sont donc visuellement affaiblis. Le tout ressemble à une image rémanente. La clé ici est de dessiner un fond transparent, sinon l'effet de superposition ne sera pas produit.
Ensuite, dessinons une goutte de pluie. Préparez d'abord une planche à dessin :
code html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>霓虹雨</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type="text/css">
.bg {
background: #000;
overflow: hidden;
}
</style>
</head>
<body class="bg">
<canvas id="canvas-club"></canvas>
<script type="text/javascript" src="raindrop.js"></script>
</body>
</html>Je dessine l'animation dans le fichier js (raindrop.js), le code est comme suit :
var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设置canvas宽、高
var clearColor = 'rgba(0, 0, 0, .1)';//画板背景,注意最后的透明度0.1 这是产生叠加效果的基础
function random(min, max) {
return Math.random() * (max - min) + min;
}
function RainDrop(){}
//雨滴对象 这是绘制雨滴动画的关键
RainDrop.prototype = {
init:function(){
this.x = random(0, w);//雨滴的位置x
this.y = 0;//雨滴的位置y
this.color = 'hsl(180, 100%, 50%)';//雨滴颜色 长方形的填充色
this.vy = random(4, 5);//雨滴下落速度
this.hit = random(h * .8, h * .9);//下落的最大值
this.size = 2;//长方形宽度
},
draw:function(){
if (this.y < this.hit) {
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.size, this.size * 5);//绘制长方形，通过多次叠加长方形，形成雨滴下落效果
}
this.update();//更新位置
},
update:function(){
if(this.y < this.hit){
this.y += this.vy;//未达到底部，增加雨滴y坐标
}else{
this.init();
}
}
};
function resize(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
}
//初始化一个雨滴
var r = new RainDrop();
r.init();
function anim() {
ctx.fillStyle = clearColor;//每一帧都填充背景色
ctx.fillRect(0,0,w,h);//填充背景色，注意不要用clearRect，否则会清空前面的雨滴，导致不能产生叠加的效果
r.draw();//绘制雨滴
requestAnimationFrame(anim);//控制动画帧
}
window.addEventListener("resize", resize);
//启动动画
anim();Effet d'entraînement
Dessinez ensuite l'effet d'entraînement. Semblable à la manière de dessiner des gouttes de pluie, l’effet d’ombre intérieure est produit en superposant l’image précédente avec un fond transparent.
Le code est le suivant (rippling.js) :
var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");//获取canvas上下文
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;//设置canvas宽、高
var clearColor = 'rgba(0, 0, 0, .1)';//画板背景,注意最后的透明度0.1 这是产生叠加效果的基础
function random(min, max) {
return Math.random() * (max - min) + min;
}
function Rippling(){}
//涟漪对象 这是涟漪动画的主要部分
Rippling.prototype = {
init:function(){
this.x = random(0,w);//涟漪x坐标
this.y = random(h * .8, h * .9);//涟漪y坐标
this.w = 2;//椭圆形涟漪宽
this.h = 1;//椭圆涟漪高
this.vw = 3;//宽度增长速度
this.vh = 1;//高度增长速度
this.a = 1;//透明度
this.va = .96;//涟漪消失的渐变速度
},
draw:function(){
ctx.beginPath();
ctx.moveTo(this.x, this.y - this.h / 2);
//绘制右弧线
ctx.bezierCurveTo(
this.x + this.w / 2, this.y - this.h / 2,
this.x + this.w / 2, this.y + this.h / 2,
this.x, this.y + this.h / 2);
//绘制左弧线
ctx.bezierCurveTo(
this.x - this.w / 2, this.y + this.h / 2,
this.x - this.w / 2, this.y - this.h / 2,
this.x, this.y - this.h / 2);
ctx.strokeStyle = 'hsla(180, 100%, 50%, '+this.a+')';
ctx.stroke();
ctx.closePath();
this.update();//更新坐标
},
update:function(){
if(this.a > .03){
this.w += this.vw;//宽度增长
this.h += this.vh;//高度增长
if(this.w > 100){
this.a *= this.va;//当宽度超过100，涟漪逐渐变淡消失
this.vw *= .98;//宽度增长变缓慢
this.vh *= .98;//高度增长变缓慢
}
} else {
this.init();
}
}
};
function resize(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
}
//初始化一个涟漪
var r = new Rippling();
r.init();
function anim() {
ctx.fillStyle = clearColor;
ctx.fillRect(0,0,w,h);
r.draw();
requestAnimationFrame(anim);
}
window.addEventListener("resize", resize);
//启动动画
anim();Résumé
Par ici tout le monde peut comprendre l'ensemble. Vous devez avoir une certaine compréhension de la façon de créer des effets de pluie. L'effet de Canvas utilisé pour dessiner des animations est vraiment accrocheur et améliore considérablement l'effet visuel du Web. Utilisez votre propre sagesse et je crois que vous pouvez créer des animations encore plus merveilleuses. C'est une des raisons pour lesquelles j'aime de plus en plus le web O(∩_∩)O~~.
Recommandations associées :
Parler de Canvas combiné avec JavaScript pour obtenir des effets spéciaux d'image
Carte interactive des lignes de métro HTML5 Canvas code d'implémentation
Comment utiliser Canvas pour traiter des images
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Animation CSS : comment obtenir l'effet flash des éléments
Nov 21, 2023 am 10:56 AM
Animation CSS : Comment obtenir l'effet flash des éléments, des exemples de code spécifiques sont nécessaires dans la conception Web, les effets d'animation peuvent parfois apporter une bonne expérience utilisateur à la page. L'effet scintillant est un effet d'animation courant qui peut rendre les éléments plus accrocheurs. Ce qui suit explique comment utiliser CSS pour obtenir l'effet flash des éléments. 1. Implémentation de base de Flash Tout d'abord, nous devons utiliser la propriété d'animation de CSS pour obtenir l'effet flash. La valeur de l'attribut animation doit spécifier le nom de l'animation, le temps d'exécution de l'animation et le temps de retard de l'animation.
![L'animation ne fonctionne pas dans PowerPoint [Corrigé]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
L'animation ne fonctionne pas dans PowerPoint [Corrigé]
Feb 19, 2024 am 11:12 AM
Essayez-vous de créer une présentation mais vous ne parvenez pas à ajouter une animation ? Si les animations ne fonctionnent pas dans PowerPoint sur votre PC Windows, cet article vous aidera. Il s’agit d’un problème courant dont se plaignent de nombreuses personnes. Par exemple, les animations peuvent cesser de fonctionner lors de présentations dans Microsoft Teams ou lors d'enregistrements d'écran. Dans ce guide, nous explorerons diverses techniques de dépannage pour vous aider à corriger les animations qui ne fonctionnent pas dans PowerPoint sous Windows. Pourquoi mes animations PowerPoint ne fonctionnent-elles pas ? Nous avons remarqué que certaines raisons possibles pouvant entraîner le dysfonctionnement de l'animation dans PowerPoint sous Windows sont les suivantes : En raison de problèmes personnels
Comment configurer l'animation ppt pour entrer d'abord puis sortir
Mar 20, 2024 am 09:30 AM
Nous utilisons souvent ppt dans notre travail quotidien, alors connaissez-vous toutes les fonctions opérationnelles de ppt ? Par exemple : comment définir les effets d'animation dans ppt, comment définir les effets de commutation et quelle est la durée de l'effet de chaque animation ? Chaque diapositive peut-elle être lue automatiquement, entrer puis quitter l'animation ppt, etc. Dans le numéro d'aujourd'hui, je partagerai avec vous les étapes spécifiques d'entrée puis de sortie de l'animation ppt. Elles sont ci-dessous. 1. Tout d'abord, nous ouvrons ppt sur l'ordinateur, cliquez à l'extérieur de la zone de texte pour sélectionner la zone de texte (comme indiqué dans le cercle rouge dans la figure ci-dessous). 2. Ensuite, cliquez sur [Animation] dans la barre de menu et sélectionnez l'effet [Effacer] (comme indiqué dans le cercle rouge sur la figure). 3. Ensuite, cliquez sur [
Après un retard de deux ans, le film d'animation national en 3D 'Er Lang Shen : The Deep Sea Dragon' devrait sortir le 13 juillet.
Jan 26, 2024 am 09:42 AM
Ce site Web a rapporté le 26 janvier que le film d'animation national en 3D « Er Lang Shen : Le dragon des profondeurs » avait publié une série de dernières images fixes et a officiellement annoncé qu'il sortirait le 13 juillet. Il est entendu que "Er Lang Shen : The Deep Sea Dragon" est produit par Mihuxing (Beijing) Animation Co., Ltd., Horgos Zhonghe Qiancheng Film Co., Ltd., Zhejiang Hengdian Film Co., Ltd., Zhejiang Gongying Film. Co., Ltd., Chengdu Le film d'animation produit par Tianhuo Technology Co., Ltd. et Huawen Image (Beijing) Film Co., Ltd. et réalisé par Wang Jun devait initialement sortir en Chine continentale le 22 juillet 2022. . Synopsis de l'intrigue de ce site : Après la bataille des dieux conférés, Jiang Ziya a pris la « Liste des dieux conférés » pour diviser les dieux, puis la liste des dieux conférés a été scellée par la Cour céleste sous la mer profonde de Kyushu Royaume secret. En fait, en plus de conférer des positions divines, il existe également de nombreux esprits maléfiques puissants scellés dans la liste des dieux conférés.
Le film d'animation 'Porco Rosso' de Hayao Miyazaki a été prolongé jusqu'au 16 janvier de l'année prochaine, avec un score Douban de 8,6
Dec 18, 2023 am 08:07 AM
Selon les nouvelles de ce site, le film d'animation "Porco Rosso" de Hayao Miyazaki a annoncé qu'il prolongerait la date de sortie jusqu'au 16 janvier 2024. Ce site avait précédemment rapporté que "Porco Rosso" avait été lancé dans la ligne spéciale de cinéma de la Fédération nationale des arts. le 17 novembre, avec un box-office cumulé de plus de 2 000 à 10 000, avec un score Douban de 8,6, et 85,8% de critiques 4 et 5 étoiles. "Porco Rosso" a été produit par le Studio Ghibli et réalisé par Hayao Miyazaki Moriyama, Tokiko Kato, Otsuka Akio, Okamura Akemi et d'autres ont participé au doublage. Il est initialement sorti au Japon en 1992. Le film est adapté de la bande dessinée de Hayao Miyazaki "L'ère des dirigeables" et raconte l'histoire de l'as pilote de l'armée de l'air italienne Pollock Rosen qui a été comme par magie transformé en cochon. Après cela, il est devenu un chasseur de primes, luttant contre les voleurs de l'air et protégeant son entourage. Synopsis : Rosen est un soldat de la Première Guerre mondiale
La bande-annonce finale du film d'argile de Netflix 'Chicken Run 2' a été annoncée et sortira le 15 décembre.
Nov 20, 2023 pm 01:21 PM
La bande-annonce finale du film d'argile de Netflix "Chicken Run 2" est sortie. Le film devrait sortir le 15 décembre. Ce site a remarqué que la bande-annonce de "Chicken Run 2" montre Chicken Loki et King Kong Jay lancent une opération. pour retrouver sa fille Molly. Molly est emmenée par un camion à FunLand Farm, et Rocky et Ginger risquent leur vie pour récupérer leur fille. Le film est réalisé par Sam Fehr et met en vedette Sandy Way Newton, Zachary Levi, Bella Ramsey, Imelda Staunton et David Bradley. Il est entendu que "Chicken Run 2" est la suite de "Chicken Run" après plus de 20 ans. La première œuvre est sortie en Chine le 2 janvier 2001. Elle raconte l'histoire d'un groupe de poulets qui risquent d'être transformés en pâtés au poulet dans une usine de poulet.
Sortie des clips de la saison 3 de la série animée Netflix 'Sonic: Homecoming', qui sortira l'année prochaine
Nov 12, 2023 am 09:25 AM
Netflix Désolé, je peux vous aider à réécrire le contenu, mais j'ai besoin de connaître le contenu original que vous souhaitez réécrire. Pouvez-vous me le fournir ? Un extrait de la troisième saison de la série animée "Sonic: Homecoming Adventures" a été annoncé lors de la Geek Week, dont le lancement est prévu en 2024. Désolé, je peux vous aider à réécrire le contenu, mais j'ai besoin de savoir ce que vous voulez réécrire le contenu original. Pouvez-vous me le fournir ? D'après notre compréhension, "Sonic : Homecoming Adventure" est produit par Sega et WildBrain. Désolé, je peux vous aider à réécrire le contenu, mais j'ai besoin de connaître le contenu original que vous souhaitez réécrire. Pouvez-vous me le fournir ? Studio Désolé, je peux vous aider à réécrire le contenu, mais j'ai besoin de connaître le contenu original que vous souhaitez réécrire. Pouvez-vous me le fournir ? et désolé, je peux vous aider à réécrire le contenu mais j'en ai besoin
Meilleur générateur d'art d'animation IA gratuit
Feb 19, 2024 pm 10:50 PM
Si vous êtes impatient de trouver le meilleur générateur gratuit d'art d'animation IA, vous pouvez mettre fin à votre recherche. Le monde de l’art anime captive le public depuis des décennies avec ses personnages uniques, ses couleurs captivantes et ses intrigues captivantes. Cependant, créer de l’art anime nécessite du talent, des compétences et beaucoup de temps. Cependant, avec le développement continu de l'intelligence artificielle (IA), vous pouvez désormais explorer le monde de l'art d'animation sans avoir à vous plonger dans des technologies complexes à l'aide du meilleur générateur d'art d'animation IA gratuit. Cela vous ouvrira de nouvelles possibilités pour libérer votre créativité. Qu'est-ce qu'un générateur d'art anime IA ? L'AI Animation Art Generator utilise des algorithmes sophistiqués et des techniques d'apprentissage automatique pour analyser une vaste base de données d'œuvres d'animation. Grâce à ces algorithmes, le système apprend et identifie différents styles d'animation
