HTML5手習い

画像の描画

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
img要素から画像データを取得した上で、drawImageメソッドでCanvasに描画する方法について学びます。drawImageメソッドにさまざまなパラメータを渡すことで、元画像の領域や描画先の領域を指定して、画像の拡大縮小ができることも説明します。
講師:
08:17

字幕

このレッスンでは Canvas に画像データを 描画する方法について学びます それではアセットの draw_image.html ファイルを Chrome とテキストエディタで 開いて下さい 今回は script で最初の状態から Canvas と Context それから画像データを 取得するようにしておき また Canvas のサイズが分かり易いように 最初から濃いグレーで 塗りつぶすようにしておきました 画像データを JavaScript から 使用する方法としては XMLHttpRequest から取得したり 或いは File API でローカルから 読み込んだりなどの方法がありますが 今回は最も簡単な― img 要素から取得する方法を使用してみます HTML を開くと画像は表示されていませんが Command+Option+I Windows の方は Ctrl+Shift+I で 開発者ツールを開くと このように画像で img 要素が あるのがわかります そして display が none に指定されて いますので非表示になりますが このようにインスペクターから inline に戻してやれば 画像はこの位置に実際には あることが分かります これで画像のデータが 自動的に読み込まれます 今回は JavaScript から読み込みますので none のままにしておきましょう Canvas への画像の描画には Context オブジェクトの drawImage メソッドを使います drawImage オブジェクトには 三種類のパターンがあり いずれも1番目の引数には 画像オブジェクトを指定します そして1番上のパターンでは基点のみの指定 2番目のパターンでは描画先の基点と 描画する幅と高さ 3番目の1番複雑なパターンでは 元の画像のどこからくり抜くかということと それからそれをくり抜いた画像を Canvas のどこに描画するかという 全ての指定を行う書き方になります それでは実際に drawImage メソッドを 使ってみましょう まずは Console から動作を確認します 今回の場合は最初から画像オブジェクトを このように getElementById で 取得済みですので 最初から使うことができます cat 変数の中身を見てみると このように dom オブジェクトが入って いることが分かります drawImage メソッドの1番目の パラメータには この img 要素の dom オブジェクトを そのまま渡すことができます ですので context の drawImage そして cat 0 0 の位置に描画してみましょう スペルミスでしたね こうです これを 基点をずらすことができますので 20 20 と描画すれば このように 20 20 から描画されました 前に描画した画像のデータというのは クリアしない限りそのまま残りますので このように重なって表示されます では clearRect メソッドで一旦 Canvas をクリアしましょう clearRect そして 0 0 から canvas の width と height を指定 これで全て Canvas がクリアされます 今度は drawImage の2番目の パターンを試してみましょう 2番目のパターンでは支点の他に 描画する先の 縮小または拡大後のサイズを指定できます ですのでこれを 例えば 15 15 など かなり小さめに指定しますと このように猫の画像が かなり縮小されて表示されます 見えづらいのでもう少し大きく このように2番目のパターンの drawImage メソッドを使うことで 画像の拡大 縮小ができます 拡大されました それでは画像を一旦クリアして 3番目のパターンを試しましょう context の drawImage cat で 3番目のパターンを使って 例えば画像の真ん中辺りを くり抜いて描画してみましょう その為にまず1度 画像のサイズを調べましょう 元画像のサイズは 300 掛ける 300 ピクセルで あることが分かります そして context の drawImage catの まず最初にくり抜く位置ですので cat の― 300 ピクセル 掛ける 300 ピクセル のうち 真ん中の 100 ピクセル100 ピクセルを 繰り抜いてみましょう width 割る2 マイナスの 50 height も同様に 割る2のマイナスの 50 そこから 100 100 これで真ん中 100 ピクセル 100 ピクセルの 指定ができたことになります そして描画先は基点と それから同様に 100ピクセル 100 ピクセルで 描画します するとこのように顔の部分だけ繰り抜かれて 100 ピクセル 100 ピクセルで表示されました この描画先の destination の方を変えれば これを拡大 顔の真ん中 100 ピクセル100 ピクセル部分だけ 拡大して 200 ピクセル 200 ピクセルで 描画 といったこともできます それでは実際にこれを HTML コードの中に 書いて利用してみましょう どうなるでしょうか 0 から 0 基点で とりあえずただ単に描画してみます 色をどうします すると何も描画されません なぜでしょうか? 実はこれはこの時点ではまだ img タグの画像データ自体が 読み込まれていない為です ですのでこのような事態を回避する為には window の onload EventListener を 使うことによって 画像データのデータ自体の ロードを保証できます 処理を全て addEventListener の中に 書きましょう addEventListener を書き これらの処理をすべて中に書く 再度リロードしてみます 今度はちゃんと描画されました このように HTML から 参照されているリソース が まだ読み込まれていないタイミングの 問題がある場合がありますので 十分にコードの記述順番には 注意しましょう このレッスンでは Canvas で 画像を描画する方法について学びました

HTML5手習い

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

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

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

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

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