Bref tutoriel
smoke.js est un plug-in js à effet de fumée réaliste basé sur HTML5 Canvas. Grâce à ce plug-in js, vous pouvez facilement créer divers effets de fumée sur la page.
Méthode d'utilisation
Introduisez le fichier smoke.js dans la page.
<script type="text/javascript" src="js/smoke.js"></script>
La structure HTML
utilise un élément
<canvas id="canvas"></canvas>
Initialiser le plug-in
Utilisez la méthode suivante en bas de page pour initialiser le plug-in d'effet de fumée.
var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') canvas.width = 1000 canvas.height = 1000 var party = smokemachine(ctx, [54, 16.8, 18.2]) party.start() // start animating party.addsmoke(500,500,10) // wow we made smoke setTimeout(function(){ party.stop() // stop animating party.addsmoke(600,500,100) party.addsmoke(500,600,20) for(var i=0;i<10;i++){ party.step(10) // pretend 10 ms pass and rerender } setTimeout(function(){ party.start() },1000) },1000)
API
Les API disponibles pour ce plug-in d'effet de fumée sont :
smokemachine(context, [r,g,b ]) : Renvoie une instance de fumée.
contexte - la toile sur laquelle la fumée est dessinée.
[r,g,b] - (facultatif) couleur de la fumée
var party = smokemachine(context, [1,5,253])
party .start( ) : Démarrez l’animation de fumée.
party.stop() : Terminez l'animation de fumée.
party.addsmoke(x,y,numberofparticles):
x,y — Les coordonnées de la fumée créée dans le canevas.
nombre de particules — Crée plus de fumée.
party.step(milliseconds) : Combien de millisecondes après quoi la fumée sera redessinée.
Ce qui précède est le contenu du plug-in js à effet de fumée réaliste HTML5 Canvas. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !