canvas

canvasはじめました。
svgのアニメーションはCSSに頼る事が多い事もあったりなのでCSSに頼らなくても良いように。
canvasは毎回再描画するので、ビットマップとして扱うためCSSに頼らなくても良い。
それに、何と言ってもFlashで作れる♪↑↑↑

svgはデータと連動する拡大縮小するコンテンツとかが適しているのかもと思いました。
これは個人的な見解ですが、データの表現やmapの描画などに対して、拡大縮小をシームレスに行なえるので相性がよいのではないかと。（拡大可能なベクターグラフィック(Scalable Vector Graphics)ですから・・・）
もちろん、svgはhtmlにパスとして埋め込めるので、canvasよりもhtmlのDOMと親和性が高いと想定しています。

もう少し、見渡して特徴を理解する必要があるので、情報収集をしたいと思います。
ということで、基礎のメモ。
参考サイト：http://www.html5.jp/canvas/index.html

Canvas要素の定義
var cs = document.getElementById(‘c1’); ←<canvas id=”c1″ />を指定

/* getContext()メソッドで描画機能を有効にする。 */
var ctx = cs.getContext(‘2d’); ←ここの引数には’2d’しか渡せません。
var w = cs.width;
var h = cs.height;
var x = 0;

Canvas全体をクリア
ctx.clearRect(0, 0, w, h); ←これを忘れると描画が重なり大変な事に・・・

パスの登録：１つしかパスは保存できません
ctx.beginPath();
ctx.strokeRect(x, x, 10, 10); ←四角を書いてます。描画したい矩形によりメゾットが違います。

ctx.arc(70, 70, 60, 10 * Math.PI / 180, 80 * Math.PI / 180, true); ←円弧のパスを保存
ctx.stroke(); ←円弧のパスを描画

パスの追加
パスを新たに作るときは、beginPath()メゾットをふたたび呼びます。
/* パスを初期化 */
ctx.beginPath();
/* 一つめのサブパス */
ctx.moveTo(30, 10);
ctx.lineTo(45, 50);
ctx.lineTo( 5, 50);
ctx.closePath(); ←svgのzとおなじ

描画のハンドラー
setInterval(render, 100);
※setTimeout()、requestAnimationFrame()もいいよ。

画像の読み込み
画像のロードに失敗すると描画出来ない（あたりまえ）なので、データをロードしたかどうかのチェックを入れると良いそうです。http://www.html5.jp/canvas/how6.html
でも、入れるタイミングを間違えると画像がちらつくので、組み込み方法に関しては実際コンテンツを作る時に対応を考えるのが良さそうです。

onload = function() {
  draw();
};
function draw() {
  var canvas = document.getElementById('c1');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  var ctx = canvas.getContext('2d');
  /* Imageオブジェクトを生成 */
  var img = new Image();
  img.src = "image2.gif?" + new Date().getTime();
  /* 画像が読み込まれるのを待ってから処理を続行 */
  img.onload = function() {
    ctx.drawImage(img, 0, 0);
  }
}

というわけで描画も確認したいので、とりあえずいろいろと落書きしてみました。
http://www.tomo.mobi/test/canvas/rakugaki.html