HTML5のピクセル処理の場合、2つの機能を使用する必要があります。最初にgetImagedataを使用して、キャンバスキャンバスのピクセルデータをコピーし、取得したピクセルデータを処理し、最後に処理されたデータをプチマゲタタを介してキャンバスキャンバスに貼り付けます。中央のピクセルのピクセルの処理プロセスをピクセルバッチ処理と呼びます。ピクセルのコピーと貼り付けは2つの時間のかかるプロセスであるため、ピクセルをより効率的に処理するために、バッチプロセスでできるだけ多くのピクセルデータを処理して、ピクセルのコピーと貼り付けの2つの操作を削減する必要があります。
これは非常に厄介なプロセスのように聞こえます。上記の文章を見るだけで、一部の友人は焦りを感じるかもしれません。実際、私はそう思うので、私はこの厄介なプロセスをLufylegendエンジンのlbitmapdataクラスにカプセル化しました。フラッシュのピクセルのようなHTML5のキャンバスを処理できます。これは非常に面白く聞こえませんか？興味がある場合は、この楽しい小さな機能を見てください。最初に、通常、画像オブジェクトを保存するために使用されるlbitmapdataを知りましょう。特定の使用法については話しません。 APIドキュメントをご覧ください。ここでは、主にそれを使用する方法をバッチプロセスピクセルに紹介します。
以下は、lbitmapdataの2つの関数です
| 関数 | 関数 |
|---|
| getpixel（x、y、colortype） | 特定のポイント（x、y）でBitMapDataオブジェクトのRGBピクセル値を表す配列を返します。 ColorTypeは、取得するピクセルデータの形式であり、デフォルトはピクセル配列です。文字列番号に設定すると、数値タイプのピクセルを返します。 |
| setpixel（x、y、data） | LbitMapDataオブジェクトの単一ピクセルを設定します。データはピクセル値です（ピクセル配列、＃ff0000、0xff000などの3つの形式をサポートします。 |
上記の2つの関数は、単一のピクセルを取得して設定することです。一度に領域でピクセルを取得または設定する必要がある場合、対応する2つの機能は次のとおりです。
| 関数 | 関数 |
|---|
| getpixels（rect） | BitMapDataオブジェクトの特定の領域のRGBピクセル値を表す配列を返します。ここで、rectはlrectangleオブジェクトであり、長方形です。 |
| setpixels（rect、data） | ピクセルデータアレイを指定された長方形領域に変換および貼り付けます。データはピクセル値です（ピクセル配列、＃ff0000、0xff000などの3つの形式をサポートします。 |
最初に写真を準備しましょう。
getpixelsから真ん中のハンサムな顔をコピーしたい場合は、このように行うことができます
[JavaScript] PlainCopyを表示します
- bitmapdata = newlbitmapdata（imglist [face]）;
- bitmapdata.lock（）;
- varimg = bitmapdata.getpixels（newlrectangle（75,50,100,100））;
LitmapDataのピクセルを複数回コピーして貼り付ける必要がある場合があります。この時点で、ピクセル配列をキャッシュできるロック関数を使用できます。このプロセスでは、行われたすべてのピクセル操作がこのキャッシュアレイで動作します。操作が完了した後、対応するロック解除機能が呼び出され、操作ピクセルデータをlbitmapdataに戻します。
たとえば、以下に示すように、コピーされた配列の一部を別のlbitmapdataの4つの異なる場所に4回貼り付けます。
[JavaScript] PlainCopyを表示します
- bitmapdata2 = newlbitmapdata（null、0,0,500,400、lbitmapdata.data_canvas）;
- bitmapdata2.lock（）;
- bitmapdata2.setpixels（newlrectangle（50,30,50,50）、IMG）;
- bitmapdata2.setpixels（newlrectangle（100,30,50,50）、IMG）;
- bitmapdata2.setpixels（newlrectangle（150,30,50,50）、IMG）;
- bitmapdata2.setpixels（newlrectangle（200,30,50,50）、IMG）;
- bitmapdata2.unlock（）;
上記のコードは、最初に空のlbitrmapdataオブジェクトを作成します。最後のパラメーターは、lufylegend-1.8.8バージョンの新機能であり、lbitrmapdataオブジェクトに保存されたデータをキャンバスオブジェクトに変換し、ピクセル操作の効率を改善できます。
実行コード効果は次のとおりです
もちろん、次のようなこれらのピクセルでいくつかの処理を行うこともできます
[JavaScript] PlainCopyを表示します
bitmapdata2.lock（）; varrect = newlrectangle（50,100,100,100）; varrect1 = newlrectangle（150,100,100,100）; for（vary = 0; y <rect.height; y ++）{ for（varx = 0; x <rect.width; x ++）{ vari = y*4*100+x*4; bitmapdata2.setpixel（rect.x+rect.width-x、y+rect.y、[img.data [i]、img.data [i+1]、img.data [i+2]、img.data [i+3]）; } } for（vary = 0; y <rect1.height; y ++）{ for（varx = 0; x <rect1.width; x ++）{ vari = y*4*100+x*4; bitmapdata2.setpixel（x+rect1.x、y+rect1.y、[img.data [i]、img.data [i+1]、img.data [i+2]、img.data [i+3]]）; } } bitmapdata2.unlock（）;効果は次のとおりですご覧のとおり、ピクセルを処理することで、写真を正常にひっくり返しました。
もちろん、画像の反転はそれほど面倒である必要はありません。 lufylegend.jsエンジンでは、画像フリップを実現するためにオブジェクトのプロパティScalexを-1に設定するだけです。ここでは、主にピクセル処理が非常に柔軟であることを示します。
さて、上記の紹介により、これらのAPIを使用してクールな粒子効果を作成できます。効果は次のとおりです。
まず、キャンバスにテキストを追加しましょう
[JavaScript] PlainCopyを表示します varlabeltext = newltextfield（）; labeltext.color =＃000000; labeltext.weight = bolder; labeltext.text = getParameter（k）; if（！labeltext.text）labeltext.text = lufylegend.js; labeltext.size = 50; varw = labelText.getWidth（）*1.1; varh = labeltext.size*1.5; labeltext.width = w; labeltext.setwordwrap（true、h）; labeltext.x =（lglobal.width-w）*0.5; labeltext.y =（lglobal.height-h）*0.5; backlayer = newlsprite（）; AddChild（Backlayer）; backlayer.addchild（labeltext）;効果は次のとおりです上で説明する必要があるのは、次の行だけです
[JavaScript] PlainCopyを表示します varw = labelText.getWidth（）*1.1; varh = labeltext.size*1.5; labeltext.width = w; labeltext.setwordwrap（true、h）;実際、テキストの高さと幅を取得するには、getWidth（）とgetheight（）を使用するだけです。ただし、キャンバスにテキストの高さを取得する機能がないため、エンジンは不正確な方法を使用してそれを取得します（もちろん、これはエンジンの次の更新で完全に解決されます）。この開発では、使用されるテキストの高さと幅は、テキストの元のサイズ以上でなければならないため、テキストのわずかに大きな高さと幅をリセットします。次に、lbitmapDataオブジェクトの描画関数を使用して、このテキストをlbitmapdataオブジェクトに変換します。なぜそれをlbitmapdataオブジェクトに変換する必要があるのですか？引き続き見下ろしてください、そしてあなたはしばらくの間知っているでしょう。
[JavaScript] View％20PlainCopy bitmapdata = newlbitmapdata（＃000000,0,0、lglobal.width、lglobal.height、lbitmapdata.data_canvas）; bitmapdata.draw（backlayer）;上記の処理は実際にはプレリュードであり、実際のディスプレイ用ではありません。 lbitmapdataの空のオブジェクトを作成し、lbitmapを介してキャンバスキャンバスに描画しましょう。 [JavaScript] View％20PlainCopy Snowback = newlbitmapdata（null、0,0、lglobal.width、lglobal.height、lbitmapdata.data_canvas）; varbitmap = newlbitmap（snowback）; backlayer.addchild（bitmap）;キーポイントはこちらです。これで、スノーバックオブジェクトのピクセルを継続的に処理する必要があります。これは簡単で、enter_frameを使用して実装できます。 [JavaScript] View％20PlainCopy backlayer.addeventlistener（levent.enter_frame、run）;上記のレンダリングでわかるように、雪が降っているように、キャンバスに白い粒子を絶えず追加する必要があります。ただし、これらの白い粒子は、キャンバスに直接描画することはできません。これらの粒子を最初にキャッシュアレイに追加し、次にバッチで操作する必要があります。次の関数は、粒子を生成するために使用され、パラメーターは（x座標、y座標、降下加速度、x軸方向速度、y軸方向速度）です。 [JavaScript] View％20PlainCopy functionparticle（px、py、ps、pvx、pvy）{ if（typeofps == undefined）ps = 1; if（typeofpvx == undefined）pvx = 0; if（typeofpvy == undefined）pvy = 0; _snow.push（{x：px、y：py、s：ps、vx：pvx、vy：pvy}）; }この関数を絶えず呼び出すことで、キャンバスに白い粒子を常に追加します。キャンバスに追加された粒子は、自由落下と同様に下向きの動きを加速します。動きの間に、障害に遭遇します。つまり、粒子がテキストに遭遇する前に画面に表示されたテキストに遭遇します。それらは抵抗の影響を受け、動きが遅くなります。このようにして、粒子はテキストのある場所のテキストによって常に妨げられ、多数の白い粒子がテキストに集まり、上記の粒子効果を形成します。 次の関数は、指定された座標がテキスト上にあるかどうかを確認するために使用されます [JavaScript] View％20PlainCopy functioncheckpixel（x、y）{ varpixel = bitmapdata.getpixel（x、y）; for（vari = 0; i <pixel.length; i ++）{ if（pixel [i]）returntrue; } ReturnFalse; }原則は、座標ポイントのピクセルを取得し、ピクセルポイントの色を確認することです。指定されたポイントのピクセル値を取得するために、以前のテキストをlbitmapdataオブジェクトに変換する必要がある理由がわかりました。 最後に、白い粒子を絶えず追加してから、粒子が下向きの動きを加速し続ける必要があります。 [JavaScript] View％20PlainCopy functionrun（）{ varn = _snow.length、d; Snowback.Lock（）; Snowback.setpixels（rect、0x000000）; while（n - ）{ varp = _snow [n]; p.vy+= gravity*ps; p.y+= p.vy; if（checkpixel（px、py））{ py- = p.vy; p.vy = 0; p.y+= 0.2; } Snowback.setpixel（px、py、0xffffffff）; if（py> lglobal.height）{ _snow.splice（n、1）; } } Snowback.unlock（）; n = 10; while（n - ）{ partial（math.random（）*lglobal.width、0、math.random（）+0.5）; } } OK、仕事は完了です。 上記の例では、テキスト[lufylegend.js]が修正されており、さらに展開してURLを介して表示するテキストを設定できます。次の関数を使用して、URL内のパラメーターの値を取得できます。 [JavaScript] View％20PlainCopy functiongetParameter（key）{ varstr = location.search.split（？）; if（str.length <2）{ 戻る; } varparams = str [1] .split（＆）; for（vari = 0; i <params.length; i ++）{ varkeyval = params [i] .split（=）; if（keyval [0] == key && keyval.length == 2）{ ReturnDecodeuricomponent（keyval [1]）; } } 戻る; }次に、この関数を呼び出してテキストの値を設定します [JavaScript] View％20PlainCopy labeltext.text = getParameter（k）;さて、あなたはそれをテストすることができます。次のURLでは、次のテキストを好きな文字に変更できます http://lufylegend.com/demo/snow_word/index.html?k=helloみんな複製図
ソースコード実際、Lufylegendエンジンのダウンロードパッケージにはソースコードがありますが、この記事とはわずかに異なります。この記事のソースコードには、HTMLファイルが1つしかありません。ブラウザを右クリックすることで、完全なソースコードを見ることができます。さて、次に、あなたの想像力を使用して、以下のより特別な粒子効果など、よりハンサムで興味深い粒子効果を作成してください。
http://lufylegend.com/demo/particle01/
lufylegend.jsエンジンの公式ウェブサイトhttp://lufylegend.com/lufylegend
