HTML5 Canvas リアルな煙エフェクト js プラグイン-htmlチュートリアル-php.cn

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

黄舟

リリース： 2017-01-18 14:30:03

オリジナル

2248 人が閲覧しました

簡単なチュートリアル

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(&#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)

ログイン後にコピー

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 サイト (m.sbmmt.com) に注目してください。