Maison > interface Web > tutoriel HTML > le corps du texte

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

黄舟
Libérer: 2017-01-18 14:30:03
original
2229 Les gens l'ont consulté

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>
Copier après la connexion

La structure HTML

utilise un élément

<canvas id="canvas"></canvas>
Copier après la connexion

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(&#39;canvas&#39;)
var ctx = canvas.getContext(&#39;2d&#39;)
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)
Copier après la connexion

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])
Copier après la connexion
  • 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) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal