HTML5手習い

ピクセル操作

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
createImageData,getImageData,putImageDataといったメソッドを使用して、Canvas内のピクセルデータに直接アクセスして、読み書きをする方法について学びます。また、ビットマップデータの構造と行優先・列優先の概念についても説明します。
講師:
09:59

字幕

このレッスンでは キャンバスのピクセルデータに 直接アクセスする方法について説明します キャンバスの内部には画像を描画したり あるいは図形をラスタライズした結果の データがビットマップとして保持されています そのデータは ImageData という データ型のオブジェクトで コンテキストオブジェクトの getImageData というメソッドで そのデータのコピーを取得できます また createImageData メソッドを 使用することによって ImageData 型のオブジェクトを 新規に作成することができます ImageData 型には一次元の配列 すなわちビットマップの生のデータに アクセスできるようになっており そのデータに対して直接 値を代入する ことによってピクセルの書き換えができます そしてコンテキストオブジェクトの putImageData メソッドを使うことによって それらの自分で作成したピクセルデータを キャンバスに描画することができます キャンバスに格納されているビットマップの 構造はこのようになっています R G B それからアルファのチャンネル それぞれデータサイズが 8 ビットで このように互いに敷き詰められて並んでいます このように RGBA の各チャンネルのデータが 交互に敷き詰められて並べられることを 「インターリーブド」と言ったりします ビットマップの形式によっては インターリーブドではなく R G B A のそれぞれの色が その色平面ごとに 個別に並んだりする形式もあります キャンバスではこのように インターリーブドで並んでいます またキャンバスでは R G B A それぞれが 8 ビットのビットマップの形式を 取っていますが 一般的には必ずしもこのような 形式である必要はなく 例えばアルファチャンネルがない RGB のみの 24 ビットである場合や また YCrCb といった RGB ではない 色空間を用いたビットマップもあります ビットマップのデータは 1 次元の配列に格納されます 2 次元のデータを 1 次元の配列に格納するために 行優先という考え方と 列優先という考え方があります たいていの画像形式は 行優先で格納されています 行優先とは例えばこの図のように 3 x 3 のビットマップがあったとき a b c をひとまとまり d e f をひとまとまり g h i をひとまとまりというように 行ごとにまとめて並べることを 行優先と言います 逆に a d g の列をひとまとまり b e h の列をひとまとまり c f i の列をひとまとまりとして 列を優先してまとまる まとまりとして扱って並べることを 列優先と言います ピクセルデータを処理する場合には x と y の 2 次元のループで 処理をすることが多いですが そのループを書く場合には 行優先のビットマップデータに対しては まず先に y すなわち行に対する ループを書いて その内側に各列にアクセスするループを書く という書き方をすることが多いです つまりこの 3 x 3 のビットマップで言うと a b c や d e f といった 列を繰り返すループを内側に書き そして各行に対するループを外側に書くのです そのようにループを記述することによって 1 次元の配列で見ると abc def ghi という順番で 隣接したデータに順番に アクセスしていくことができるのです ループの書き方を逆にすると まず a にアクセスして それから d にアクセスし g にアクセスし また b に戻って 次に d h 次に c に戻って e i というように 順番にアクセスするのではなく 飛び飛びで 行ったり戻ったりするような アクセスの仕方になってしまうのです このようなアクセスの仕方では 計算機のアーキテクチャ上 効率が悪くなってしまう場合があるので ループの書き方には注意する必要があります それでは実際に JavaScript で ピクセルデータを書き換えてみましょう アセットの animation.html を テキストエディタと Google Chrome で 開いてください このレッスンでは各ピクセルデータに ランダムなデータを代入してみます それではまずアニメーションを書くために window の requestAnimationFrame そこにコールバックを渡します コールバックの最後では 再度自分自身を呼び出します そしてループ用の変数を作りましょう x y x, y という変数を使って 縦と横の二重のループを書きます また イメージ用の変数を作成しましょう image オブジェクトは context オブジェクトの createImageData という メソッドで作成できます そのサイズは キャンバスのサイズと同じにします そしてまずは 外側のループは y のループにします 外側を y にする理由は 先ほど説明したように ビットマップのデータが行優先で 格納されているためです そして内側に x のループを書きます それから格納する色の強さを ランダムに決定しましょう 色の強さ intensity を表す i という変数を作ります i は まず必ずビットマップの 各データにアクセスする数値は 整数にする必要があるので Math.floor を使います そしてランダムに ゼロから 255 の値を生成します それを使って image オブジェクトの data というプロパティ ここに生のビットマップデータが 配列で格納されています それを 4 掛ける y 掛ける image の width プラス 4  掛ける x プラス 0 このような式で各ピクセルデータに アクセスして代入します この式は この部分の 4 * y * image.width という部分で 行の先頭のアドレスを割り出します そしてそれに加えて 4 * x + 0 という式で 行の先頭から各ピクセルへの オフセットを計算するのです これを R G B A 全てに対して 計算します そしてこの部分は R この部分は G R の1つ隣なので 1 B は 2 そしてアルファ成分は +3 RGB の各成分の強さは この i というものをそのまま使います そしてアルファ成分はそのまま 255 にします そしてビットマップの埋め尽くしができたら putImageData で ビットマップを格納します 2 番目のパラメータと 3 番目のパラメータは ビットマップを格納するアドレス 座標のオフセットです 1 次元配列に対して 2 次元的にアクセスする このような書き方は 慣れるまで分かりづらいかも知れませんが ピクセルに対する操作では 非常によく現れるので 覚えておいてください それではリロードしてみましょう このように各ピクセルがランダムな強さで 敷き詰められた結果 ホワイトノイズのような画像が現れました このレッスンでは キャンバスのピクセルデータに 直接アクセスする方法について 学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

6時間01分 (44 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。