Plug-in JS avec effet de fumée réaliste HTML5 Canvas

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 5ba626b379994d53f7acf72a64f9b697

<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) !