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