HTML5新機能 〜 canvas要素

HTML5の新機能の１つ「canvs要素」を試してみた。
例によって検証アプリを作成して、試した結果が下図。

作成するのは簡単だが、ボタンをクリックするたびにcanvas描画領域を初期化する方法が分からなかったので、そこはメモしておく。

まず、canvasで描画するためには、canvasタグを使用して描画領域を設定する。

<canvas id="myCanvas" width="640" height="480">
　<!-- ここに描画されます-->
</canvas>

この際、widthとheightは必須属性ではないが、明示的に指定することでブラウザの規定値を使用しなくなる。

次に、描画であるが、例えば長方形を描く場合はjavascriptで次のように書く。

 //widthとheightの初期化
 canvas.setAttribute('width', '10000');
 canvas.setAttribute('height', '10000');
 
 //矩形
 if(ct){
  ct.fillRect(20, 20, 120, 80);
  ct.strokeRect(60, 60, 120, 100);
 }

ここで、canvas.setAttributeを使用して、widthとheightを改めて指定している。これは、何かボタンを押すたびに、描画する図形を切り替える場合には、canvas領域を初期化する必要があり、そのために必要である。

例えば、下記はボタンを押すことで、三角形の描画と長方形の描画を切り替える。

$drawRectangle.click(function(){
 canvas.setAttribute('width', '10000');
 canvas.setAttribute('height', '10000');
 //矩形
 if(ct){
  ct.fillRect(20, 20, 120, 80);
  ct.strokeRect(60, 60, 120, 100);
 }
});

$drawTriangleId.click(function(){
 canvas.setAttribute('width', '10000');
 canvas.setAttribute('height', '10000');
 if(ct){
  //図形を描き始めることの宣言
  ct.beginPath();
  
  //図形を描きはじめる位置まで移動
  ct.moveTo(20,20);

  //現在位置から引数の座標まで線を引く
  ct.lineTo(180,100);
  
  //現在位置から引数の座標まで線を引く
  ct.lineTo(180,50);

  //現在位置と始点まで線を引く
  ct.closePath();

  //ブラウザへ三角形を描画する
  ct.stroke();
  } 
});