Internet Explorer対応
Video要素と同様にCanvas要素も主要ブラウザにて対応しています。しかしながら、Internet Explorer9以前のバージョンにおいてはCanvas要素に対応できていません。よって、バージョン9以前でのInternet ExplorerでCanvasの機能を利用する為に修正パッチとしてGoogleより提供されているExplorerCanvas（excanvas.js）というJavascriptライブラリーを外部ファイルとして読み込む必要があります。
excanvas.jpは以下のURLよりダウンロードすることができます。
http://code.google.com/p/explorercanvas/
また、excanvas.jpを読み込んでいるscript要素を<!--[if lte IE 8.0]>と<![endif]-->で囲む事でInternet Explorer8以下アクセスした場合にのみexcanvas.jsをロードするよう指定することができます。
尚、<!--[if lte IE 8.0]>と<![endif]-->で囲まれた部分は、他ブラウザやInternet Explorer 9でアクセスした際はコメントとして扱われます。
<!--[if lte IE 8.0]> <script type="text/javascript" src="excanvas.js"></script> <![endif]-->
キャンバス定義
HTML5でキャンバス領域を定義するにはbody要素内に以下のように記述します。
<canvas id="myCanvas" width="300" height="200"></canvas>
Canvas要素が持つ属性はwidth、heightの2つのみであり、指定しない場合はデフォルトの300×150ピクセルとなります。
未対応ブラウザ向け代替コンテンツの設定
Canvas機能が利用できないブラウザ向けに代替のテキストを表示する際は以下のように記述します。
<canvas id="myCanvas" width="150" height="150"> お使いのブラウザはCanvas機能に対応しておりません。 </canvas>
描画コンテキストの取得
キャンバス領域に実際に図形を描画する前に、Canvas APIのgetContextと呼ばれるDOMメソッドを用いて描画コンテキストを取得する必要があります。
以下の記述では、getElementById()でDOMノードオブジェクトを取得し、getContext()を使って描画コンテキストへアクセスしています。
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
getContext()には引数をセットしますが、Canvas APIの場合は常に”2d”を指定します。
矩形の描画
Canvas APIには矩形を描画する3つのメソッドが予め用意されており、JavaScriptで記載することで利用可能となります。
strokeRect(x, y, width, height) - 指定の矩形を線で描画する
//左上よりx座標：0px,y座標:0pxの位置から横幅200px、高さ100pxの矩形を描画する context.strokeRect(0, 0, 200, 100);
図1: 横幅300px、縦幅250pxのCanvasに描画した場合
fillRect(x, y, width, height) - 指定の矩形を指定の色で塗り潰す
// 塗りつぶしの色を指定 context.fillStyle = "rgb(0, 255, 0)"; // 指定した色で塗りつぶした矩形を描画する context.fillRect(0, 0, 200, 100);
図2: 横幅300px、縦幅250pxのCanvasに描画した場合
clearRect(x, y, width, height) - 指定ピクセルのクリアを行う
// 指定されたピクセルにおいて矩形のクリアを行う context.clearRect(30, 30, 240, 140);
図3: 横幅300px、縦幅250pxのCanvasに描画した場合
第1章 |  |
第2章 | |
第3章 | |
第4章 | |
