トップ ＞ スキル ： Web ＞ HTML5

Web

各要素のリファレンス16

組み込みコンテンツ要素（4/4）

canvas要素（動的グラフィック）

カテゴリ フロー・コンテンツ、フレージング・コンテンツ、エンベッディッド・コンテンツ
コンテンツモデル トランスペアレント
利用可能な場所 エンベッディッド・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 width（canvas要素の横幅を指定）
height（canvas要素の縦幅を指定）
デフォルトスタイル -

canvas要素は、図の描画をJavaScriptだけで実現します。Firefox、Opera、Safari、Chromeではすでに実装されています。Internet Explorerの最新のVer9は対応していますが、それ以前の古いブラウザであれば、「ExplorerCanvas」というJavaScriptライブラリでエミュレートできます。ただし、すべてのcanvas要素の機能が使えるわけではありません。

    ExplorerCanvas　http://excanvas.sourceforge.net/

canvas要素は、動的に図を描く必要がるコンテンツやアニメーションなどに適しています。ただ、いつ見ても同じイメージであればimg要素を使い、デコレーション用のイメージであればスタイルシートを使うべきです。つまり、canvas要素の乱用は避けるべきと言われています。

canvas要素において基本的な使い方を次にご紹介しましょう。

■ 基本使用方法

canvas要素を使って図形を描画する手順は以下のようになります。

  • 1. canvasオブジェクトを取得する
  • 2. canvasオブジェクトから描画用コンテキストを取得する
  • 3. コンテキストのメソッドやプロパティを利用して描画を行う

それぞれの手順について見ていきます。

1. canvasオブジェクトを取得する

canvasの機能を利用するために、<canvas>タグを配置します。その時、JavaScriptから<canvas>タグを利用するために、タグに後から参照できるようにIDを付けます。また、canvas領域を指定するためにwidthコンテンツ属性とheightコンテンツ属性を使て、横幅と縦幅のサイズを指定します。

  <canvas id="canvas_a" width="200" height="200">
  	<!-- フォールバックコンテンツを入れる　-->
  </canvas>

次に、document.getElementById( )メソッドを利用して、<canvas>タグを表すcanvasオブジェクトを取得します。引数にcanvas_aと指定すると、HTMLにid="canvas_a"を指定したタグのオブジェクトを取得できます。

  <script type="text/javascript">
  	var canvas = document.getElementById("canvas_a");
  	//・・・
  </script>

2. canvasオブジェクトから
    描画用コンテキストを取得する

canvasのオブジェクトを取得しただけでは描画はできないので、次にcanvasオブジェクトから描画用のコンテキストを取得します。canvasのオブジェクトとコンテキストの関係は分かりづらいですが、canvasオブジェクトが画用紙でコンテキストがクレヨンみたいなものとして捉えると何だか分かりやすいかと思います。

※ コンテキストとは、「文脈」「前後関係」という意味ですが、プログラミングでは「制御情報」という意味合いで使われている場合が多いです。

canvasオブジェクトから描画用のコンテキストを変数ctxに取得するには、次のように記述します。

  var ctx = canvas.getContext("2d");

この例では、コンテキストの種類を「2d」（2次元の画像）と指定しています。3d（3次元の画像）用の描画機能も提供された時に区別されるように「2d」と表記しますが、現段階では「2d」しか利用できません。


3. コンテキストのメソッドや
    プロパティを利用して描画を行う

コンテキストを取得したら、描画用のメソッドを呼び出して描画を行います。色を指定するのがfillSytleプロパティで、矩形（長方形）を描画するのがfillRect()メソッドを使って次のように記述します。

  ctx.fillStyle = "rgb(255,0,0)"; //塗りつぶし色
  ctx.fillRect(50,50,200,200);	//矩形を描画

この記述で赤い色に塗りつぶされた矩形が描画されます。

■利用例
  <!DOCTYPE html>
  <html><head><meta charset="utf-8"></head><body>
  <!-- canvasの定義 -->
  <canvas id="canvas_a" width="300" height="300"></canvas>
  <script type="text/javascript">
  	// canvasを取得
  	var canvas = document.getElementById("canvas_a");
  	// 描画用のコンテキストを取得
  	var ctx = canvas.getContext("2d");
  	// 描画処理
  	ctx.fillStyle = "rgb(50,255,50)";
  	ctx.fillRect(10,10,100,100);
  	ctx.fillStyle = "rgba(0,0,255,0.5)";
  	ctx.fillRect(60,60,100,100);
  </script>
  </body></html>

利用例をブラウザでレンダリングすると次のようになります。

canvas要素

map要素（イメージマップ）

カテゴリ フロー・コンテンツ
フレージング・コンテンツだけを入れた場合はフレージング・コンテンツ
コンテンツモデル トランスペアレント
利用可能な場所 フレージング・コンテンツが期待される場所
開始タグ 必須
終了タグ 必須
要素固有のコンテンツ属性 name（イメージマップを参照するために使う名前を指定）
デフォルトスタイル -

map要素は、中にarea要素を入れて使うことで、イメージマップを定義することができます。

※ イメージマップとは、img要素やobject要素で表されたイメージの中の特定の幾何学的な領域をハイパーリンクにしたものです。

イメージマップを実現させるためには、イメージマップのイメージを表すimg要素やobject要素を、イメージマップの定義とを結びつける必要があります。そのために、まずmap要素に、nameコンテンツ属性を使って、名前を指定する必要があります。よって、map要素のnameコンテンツ属性は必須で、スペース文字を含まない空でない値を指定します。そして、次にイメージを表すimg要素やobject要素のusemapコンテンツ属性に、map要素のハッシュ参照名をセットします。

■利用例
  <p>図形のボタンを押してください：<br />
  	<img src="button.png" alt="選択ボタンを押します。" usemap="#click">
  	<map name="click">
  		<area shape="rect" coords="10,10,100,70" href="01.html" alt="四角">
  		<area shape="circle" coords="150,30,40" href="02.html" alt="丸">
  	</map>
  </p>

利用例をブラウザでレンダリングすると次のようになります。

map要素

img要素には、usemapコンテンツ属性に「#click」がセットされています。そして、map要素のnameコンテンツ属性に「click」がセットされているので、img要素とmap要素が結び付けられます。この時、img要素のusemapコンテンツ属性の値には、「#」を頭に付けることに注意します。

area要素（イメージマップのハイパーリンク）

カテゴリ フロー・コンテンツ
フレージング・コンテンツだけを入れた場合はフレージング・コンテンツ
コンテンツモデル 空
利用可能な場所 フレージング・コンテンツが期待される場所。ただし、map要素の中だけで利用可
開始タグ 必須
終了タグ 禁止（ただし、<area />は表記可）
要素固有のコンテンツ属性 alt（イメージマップのフォールバック・コンテンツとなるテキストを指定）
coords（ハイパーリンクとなる形状の座標の定義を指定）
shape（ハイパーリンクとなる形状の種類の定義を指定）
href（ハイパーリンク先のアドレスを指定）
target（ハイパーリンクをたどったときに使われるブラウジング・コンテキストの名前やキーワードを指定）
ping（ユーザがハイパーリンクをたどったことを知らせるURLのリストを指定）
rel（ハイパーリンクがあるドキュメントと、ハイパーリンクが指し示す宛先との関係を表すキーワードのリストを指定）
media（ハイパーリンクの宛先が想定するメディアを表すキーワードを指定）
hreflang（ハイパーリンクの宛先の言語コードを指定）
type（ハイパーリンクの宛先のMIMEタイプを指定）
デフォルトスタイル area{
    display:none;
}

area要素は、map要素の中に入れて使い、イメージマップ上のハイパーリンクを定義します。この要素では、三角形や四角形や円などの所定の形状で領域を定義し、その領域をハイパーリンクにします。

★ hrefコンテンツ属性

area要素は、ハイパーリンクの領域を指定しますので、リンク先のURLを入れるためにhrefコンテンツ属性を使います。つまり、a要素と同じ役割を果たしますので、target、ping、rel、media、hreflang、typeコンテンツ属性はa要素と同じ働きをします。
もし、area要素にhrefコンテンツ属性を指定しなかったら、ハイパーリンクにはならない領域を表すことになります。例えば、円の中をくり抜いた形状であるドーナツ型の領域に用いられます。

★ altコンテンツ属性

area要素にhrefコンテンツ属性をセットした場合は、altコンテンツ属性は必須となります。altコンテンツ属性は、フォールバック・コンテンツとして表示されます。該当するイメージが表示できないユーザに対して、そのイメージを想像させるような文章をコンテンツとしてセットします。

同じリンク先を持つarea要素が2つ以上ある場合、1つはaltコンテンツ属性に値をセットしますが、それ以外のarea要素のaltコンテンツ属性には空文字列（alt=""）をセットします。この場合、altコンテンツ属性は省略できませんので、注意します。

なお、area要素にhrefコンテンツ属性がなければ、altコンテンツ属性はマークアップしません。また、altコンテンツ属性をマークアップして空文字の値をセットすることもできないので注意します。

■形状の定義

area要素で定義できる領域の形状は、shapeコンテンツ属性にセットします。shapeコンテンツ属性は列挙属性で、指定できる値は決められています。このコンテンツ属性に任意のキーワードをセットすることはできません。

形状の座標は、area要素のcoordsコンテンツ属性を使って、イメージの端からの距離をピクセルで指定します。この属性には、整数を半角カンマで区切って指定します。また、整数の順番には形状によってそれぞれ意味が定義されています。

shapeコンテンツ属性に指定できる値
shapeコンテンツ
属性の値		 意味 coordsコンテンツ属性の左からの値
circle 円 以下の3つの整数を指定
①イメージの左端から円の中心までの距離
②イメージの上端から円の中心までの距離
③ 円の半径（0以上の整数）
poly 多角形 以下の2つの整数で多角形の頂点の位置を表す。最低でも3組の点を指定する必要がある
①イメージの左端からの距離
②イメージの上端からの距離
この2つの整数で表された頂点を順に結んで多角形を表す
rect 四角形 以下の4つの整数を指定
①イメージの左端から、四角形の左端までの距離
②イメージの上端から、四角形の上端までの距離
③イメージの左端から、四角形の右端までの距離
④イメージの上端から、四角形の下端までの距離

【各要素のリファレンス16】