HTML5 Canvas realistisches Raucheffekt-JS-Plug-in

Kurzes Tutorial

smoke.js ist ein realistisches Raucheffekt-JS-Plug-in basierend auf HTML5 Canvas. Mit diesem js-Plug-in können Sie ganz einfach verschiedene Raucheffekte auf der Seite erstellen.

Verwendungsmethode

Fügen Sie die Datei „smoke.js“ in die Seite ein.

<script type="text/javascript" src="js/smoke.js"></script>

HTML-Struktur

verwendet ein 5ba626b379994d53f7acf72a64f9b697-Element als Container.

<canvas id="canvas"></canvas>

Initialisieren Sie das Plug-in

Verwenden Sie die folgende Methode unten auf der Seite, um das Raucheffekt-Plug-in zu initialisieren.

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

Die für dieses Raucheffekt-Plug-in verfügbaren APIs sind:

• smokemachine(context, [r,g,b ]): Gibt eine Smoke-Instanz zurück.
  

• Kontext – die Leinwand, auf der Rauch gezeichnet wird.

• [r,g,b] - (optional) Rauchfarbe

var party = smokemachine(context, [1,5,253])

• party .start( ): Rauchanimation starten.

• party.stop(): Beendet die Rauchanimation.

• party.addsmoke(x,y,numberofparticles):

• x,y – Die Koordinaten des im Canvas erzeugten Rauchs.

• Anzahl der Partikel – Erzeugt mehr Rauch.

• party.step(milliseconds): Wie viele Millisekunden nach denen der Rauch neu gezeichnet wird.

Das Obige ist der Inhalt des HTML5 Canvas-Plug-Ins für realistische Raucheffekte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).