目次:
ビデオ: HTML5講座 上巻 第4章 HTML 5で登場した新しい要素【動学.tv】 2025
HTMLは長い間画像をサポートしていましたが、HTML5のキャンバスインターフェースはWeb画像に新しい命を与えます。イメージはキャンバス内に表示でき、キャンバスAPIのベクトル描画技法と統合することができます。また、表示する画像の一部を選択したり、さまざまな変換を画像に適用して、興味深い構図やアニメーションを作成することもできます。
この図は、キャンバス要素上に2回描かれたイメージを示しています。
<！
HTML5キャンバスに画像を描画する
キャンバス要素で画像を使用する最も簡単な方法は、Webページで既に使用可能な画像を使用することです。普通の
function draw（）{var drawing = document。 getElementById（ "drawing"）; var con = drawing。 getContext（ "2d"）; var goofyPic =ドキュメント。 getElementById（ "goofyPic"）; con。 drawImage（goofyPic、0、0、50、50）; var image2 =新しいImage（）; image2。 src = "andyGoofy。gif"; con。 drawImage（image2,100,100,70,50）;} // end draw
これを行う方法は次のとおりです。
<！ - 3 - >
メインページに画像を作成します。
画像にアクセスする最も簡単な方法は、通常のHTMLを使用して画像をメインページに埋め込むことです。必要に応じて、キャンバス内のバージョンのみが表示されるように、-
タグをCSSコード（display：none）で非表示にすることができます。
ドキュメントでイメージのJavaScript変数を作成します。 getElementByID（）メカニズム
drawImage（） -
関数を使用してキャンバスに画像を描画します。
-
5つのパラメータのうち最初のものがイメージオブジェクトの名前です。 （イメージのファイル名だけでなく、JavaScriptイメージオブジェクトの名前でなければなりません）。次の2つのパラメータはイメージの左上隅のX値とY値です。最後の2つのパラメータはサイズ画像の幅と高さを指定します。 JavaScript Image
オブジェクトを作成します。
-
イメージをページに埋め込みたくない場合は、JavaScriptを使用してイメージを動的に作成できます。新しいImage（）コンストラクタを使用して新しい画像を構築します。 イメージの src
プロパティを変更します。
-
JavaScriptイメージを作成する場合は、イメージに関連付けられたファイルを示すsrc属性を指定する必要があります。イメージが読み込まれるまでに時間がかかることがあります。 画像はサーバーからロードされるまで表示されません。ほとんどの場合、これは問題にはなりませんが、画像のロードが完了するまでプログラムを遅らせる必要があることがあります。 Imageオブジェクトには、コールバック関数を受け入れるonloadプロパティがあります。描画が終了するまで待機するには、 イメージを使用します。 onload = finishDrawing; function finishDrawing（）{//残りの描画コードがここに入ります}
HTML5キャンバス上のイメージの一部を描画する
元のイメージの小さな部分を描画したいことがあります。グーフィー顔の中心に焦点を当てたプログラムは、次のようになります。
イメージの一部を描くのはかなり簡単です。同じdrawImage（）コマンドを使用しますが、今回は9つのパラメータを持つバージョンを使用します：
con。 drawImage（GoofyPic、60,70,90,90,0,0,150,150）;
これらのパラメータの意味は次のとおりです。
画像名：
最初のパラメータは画像オブジェクト（ファイル名ではなく、JavaScript Imageオブジェクトの名前）です。
ソースの左上隅：
-
最初の仕事は、表示する元の画像の部分を選択することです。次の2つのパラメータは、元の画像上の選択項目の左上隅を示します。 （GimpやIrfanViewのような画像エディタを使って、選択位置とサイズを決定することができます）。 ソースの高さと幅：
-
次の2つのパラメータは、ソース選択の高さと幅を示します。 送信先の位置：
-
次の2つのパラメータは、キャンバス上の画像の左上隅の位置です。 宛先のサイズ：
-
最後の2つのパラメータは、キャンバス上の宛先イメージの高さと幅を表します。 ここで説明しているサブ画像技法は、いくつかの画像を単一の画像（時には
-
スプライトシート と呼ぶ）に結合できるので非常に便利です。これにより、画像を配信するためのオーバーヘッドが減少します。 （1つの大きな画像は、いくつかの小さな画像よりも配信が速い）ゲームやアニメーションで頻繁に使用され、1つのエンティティがウォーキングや攻撃を示唆する複数の画像を連続して表示する場合があります。
