Canvasによる長方形の描画サンプル

icon 項目のみ表示/展開表示の切り替え

Canvasによる長方形の描画

HTML5のCanvasを使用して図を表示する場合は、まず図を描く領域を指定します。
このサンプルでは、htmlソース中に以下のように記述しています。
<canvas id="t1" width="320" height="240"></canvas>
CanvasはSVGの様にインラインで記述できず、javascriptで図形を指定して描画する必要があります。htmlを読み込んだ時に自動にjavascriptが実行されるようにwindow.onload = function(){にソースを記述しています。
次にgetElementByIdを使用してCanvasオブジェクトを取得しgetContextメソッドがセットされているかチェックします。
セットされていた場合、Canvas要素よりコンテキストを作成するために、 
var ctx = canvas.getContext('2d');
を呼び出します。ctxにコンテキストが返されます。
塗りつぶす色の赤を指定するためにfillStyleプロパティを設定します。
後は、fillRectでx座標、y座標と幅、高さを指定すれば塗りつぶされた長方形が下図の様に描画されます。

以下に320*240の領域に座標 50,50を左上とし幅200 高さ100の赤色の長方形を描画する場合のソースコードを示します。 
<!DOCTYPE html> 
<html> 
<head>
 <meta charset="utf-8"/>
 <title>Canvasによる長方形の描画サンプル</title>
</head> 

<body> 
<canvas id="c1" width="320" height="240"></canvas>
<script type="text/javascript">

window.onload = function(){
  var canvas = document.getElementById('c1');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgb(255,00,00)';
    ctx.fillRect(50,50,200,100);
  }
}
</script>
</body> 
</html>
ソースファイルのダウンロード(rect.zip)