HTML5 Canvas リアルな煙エフェクト js プラグイン

簡単なチュートリアル

smoke.js は、HTML5 Canvas に基づいたリアルな煙エフェクトの JS プラグインです。この js プラグインを使用すると、ページ上にさまざまな煙のエフェクトを簡単に作成できます。

使用方法

smoke.js ファイルをページに導入します。

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

HTML 構造

はコンテナとして 要素を使用します。

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

プラグインを初期化する

ページ下部にある次の方法を使用して、煙エフェクトプラグインを初期化します。

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

この煙エフェクト プラグインで使用できる API は次のとおりです:

• smokemachine(context, [r,g,b]): 煙のインスタンスを返します。
  

• コンテキスト - 煙を描くためのキャンバス。

• [r,g,b] - (オプション) 煙の色

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

• party.start(): 煙のアニメーションを開始します。

• party.stop(): 煙のアニメーションを終了します。

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

• x,y — キャンバス内に作成された煙の座標。

• numberofparticles — より多くの煙を作成します。

• party.step(ミリ秒): 煙が再描画されるまでのミリ秒数。

上記は、HTML5 Canvas リアル煙エフェクト js プラグインの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。