Canvasのまとめ

Canvasは，html5で定義されている，Webページにビットマップイメージを描画するための技術です。

InternetExplorerでは正式にはCanvasに対応していませんが，ExplorerCanvasというCanvasをエミュレートするJavascriptライブラリが登場したために，状況が変わってきました。
・ExplorerCanvas
以下のテンプレートを使って，Canvasの学習をしていきましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="Shift-JIS"> <title>テンプレート</title>  <script type="text/javascript"> window.onload = function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); if(typeof G_vmlCanvasManager != 'undefined'){ canvas = G_vmlCanvasManager.initElement(canvas); } canvas.width = 300; canvas.height = 150; var ctx = canvas.getContext('2d'); //ここからコードを書く } </script> </head> <body> </body> </html>

１．線分の描画

ctx.beginPath();	…パスの定義を開始する（以前のパスをリセットする）
ctx.moveTo(100, 100);	…開始点座標を定義する
ctx.lineTo(150, 150);	…直前の点からこの点にむかって線分を描画する
ctx.lineTo(50, 150);	〃
ctx.closePath();	…開始点に向かって線分を描画し，パスを閉じる　　　（このメソッドを実行しないと，閉曲線にならない）
ctx.stroke();	…Canvas上に描画する

　stroke()メソッドのかわりにfill()メソッドを使用すると，塗りつぶしになる。

２．円弧の描画

円弧を描くときの角度（ラジアン）は，x軸正の向きから時計回りに定義される。
円弧の描く向きは，反時計回りがtrue, 時計回りはfalse。

ctx.beginPath();	…パスの定義を開始する（以前のパスをリセットする）
ctx.arc(70, 80, 50, 0, Math.PI * 2, false);	…(70, 80)を中心として，50の半径で，開始角0から終了角2πまで，時計回りに描く。
ctx.stroke();	…Canvas上に描画する

　stroke()メソッドのかわりにfill()メソッドを使用すると，塗りつぶしになる。

３．長方形（正方形）の描画

　１．線分の描画によって，長方形や正方形の描画は可能だが，次のメソッドで，処理を簡略化できる。

ctx.strokeRect(x, y, w, h);	…輪郭の描画
ctx.fillRect(x, y, w, h);	…塗りつぶし
ctx.clearRect(x, y, w, h);	…クリア

　いずれも，(x, y)が左上端の座標，wが幅，hが高さ。

４．色の定義

何も指定されていなかったら，黒になる。
輪郭描画の際は，
ctx.strokeStyle = "#ff0000";
などとしてから，stroke コマンドを実行する。
塗りつぶし描画の際は，
ctx.fillStyle = "#0000ff";
などとしてから，fill コマンドを実行する。

５．テキストの描画

ctx.fillText(text, x, y);	…テキストを塗りつぶす（通常こちらを使う）
ctx.strokeText(text, x, y);	…テキストの輪郭を描画する

座標(x, y)は，通常はテキストの左下の座標になる。
テキストの描画には，次のプロパティもある。