Canvasとは
対応ブラウザ
※Windows 7上で動作確認を行っています。
※ブラウザの設定より、異なる挙動をする場合があります。
※ブラウザにCanvas自体が実装されている場合に「○」としています。個々のメソッドや属性などについては未実装である場合があります。
解説
Canvasは、スクリプトでビットマップ画像を描くためのHTML5の要素です。
グラフやゲームのグラフィックといった図形を動的に描くときに使われます。
html内に次のように記述すると、幅が200、高さが150の描画エリアが作成されます。
<canvas id="fig" width="200" height="150"></canvas>
この描画エリアは透明なので、デフォルトでは表示されません。
次のようにCSSで背景色を指定すると、範囲を見ることができます。
<canvas id="fig" width="200" height="150" style="background-color: silver">
なお、Canvasに対応していないブラウザや、ブラウザのスクリプトを無効にしている場合など、
ユーザーがCanvasを使うことができない環境である場合を考慮して、次のように
<canvas> ～ </canvas>の中に代替コンテンツを指定しておくとよいでしょう。
<canvas id="fig" width="200" height="150">図形を表示できません。</canvas>
図形の描画には、JavaScriptを使います。
基本形は次のようになります。
var canvas = document.getElementById("fig");
if (canvas.getContext) {
var context = canvas.getContext("2d");
//ここに描画コードを記述します
}
まず、canvas要素のgetContext()メソッドがブラウザでサポートされているかをチェックします。
サポートされていない場合は、描画を行いません。
サポートされている場合は、引数に「"2d"」をつけてgetContext()メソッドを呼び出し、
２次元描画用のコンテキスト（描画エリア）のオブジェクトを取得します。
このコンテキストに対して、描画を行います。
たとえば、次のように書くと、x = 20、y = 40 の位置に、横幅30、縦幅50の、黒い四角形を表示します。
（座標系は、左上を原点(0,0)として、xが右方向、yが下方向を表します）
context.fillRect(20, 40, 30, 50);
なお、現在各ブラウザで共通に利用できるコンテキストの種類は、"2d"のみです。
将来的には、３次元描画用のコンテキスト"3d"などもサポートされる可能性があります。
描画方法の詳細は、Canvasの使い方の各ページをご覧ください。
【線のにじみについて】
上の図では四角形の線は少し太く、色は薄く見えます。
これは、そのような設定の線が設定されているのではなく、
指定した座標が画素と画素の中間にあたるため、補間されているのです。
このような現象を回避したいときは、座標に0.5足した値を設定すると、線の描画位置が画素と一致して細い線で描かれます。
context.fillRect(20.5, 40.5, 30, 50);
関連項目
図形を描くには？
